浮动布局
块级:独占一行
浮动后:可以同行显示(只占自身显示区域)
1、解决的经典案例
<style type="text/css">
.box {
width: 300px;
border: 1px solid black;
}
.box img {
width: 150px;
float: left;
}
</style>
<div class="box">
<img src="bg.gif" alt="">
浮动布局解决的经典案例，浮动布局解决的经典案例，浮动布局解决的经典案例，浮动布局解决的经典案例，浮动布 局解决的经典案例，浮动布局解决的经典案例，浮动布局解决的经典案例，浮动布局解决的经典案例，浮动布局解决 的经典案例，浮动布局解决的经典案例，浮动布局解决的经典案例，浮动布局解决的经典案例，浮动布局解决的经典 案例，浮动布局解决的经典案例，浮动布局解决的经典案例，浮动布局解决的经典案例。
</div>
2、基本语法
float: left | right
3、浮动布局问题
在不做清浮动情况下，父级不会获取子级的高度
-
坑
- 当target标签的内部有浮动的子级,target的兄弟标签布局会出现显示异常
- 父级未设置固定高度,不再撑开父级高度
4、清浮动
- 目的：对父级所在容器中的Block-level Box布局不产生影响
- 原理：在浮动布局情况下，让父级获得合适的高度
① 浮动的父级设置高度
super {
height: npx;
}
② 浮动的父级设置overflow
super {
overflow: hidden;
}
③ 浮动的父级兄弟设置clear
brother {
clear: left | right | both;
}
④ 浮动的父级伪类清浮动
super:after {
content: "";
display: block;
clear: left | right | both;
}
总结
不完全脱离文档流
通常文档流中,子标签在父级标签未设置高度的情况下,会撑开父级的高度
脱离文档流后的子级标签,不再撑开父级高度
不完全脱离文档流(浮动后的结果),不清浮动,不会撑开父级高度,清浮动后,会重新撑开父级高度
清浮动本质:让父级获得合适的高度
