文档流
指盒子按照HTML标签编写的顺序依次从上到下、从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写得先排列,后写的后排列,每个盒子都占据自己的位置。
浮动特性
- 浮动元素有左浮动(float:left)和右浮动(float:right)两种;
- 浮动的元素会脱离文档流向左或向右浮动,碰到父元素边界、浮动元素、未浮动的元素才停下来;
- 相邻浮动的块元素可以并在一行,超出父级宽度就换行;
- 浮动让行内元素或块元素自动转化为行内块元素;
- 浮动元素后面没有浮动的元素会占据浮动元素的位置,没有浮动的元素内的文字会避开浮动的元素,形成文字饶图效果;
- 父元素内整体浮动的元素无法撑开父元素,需要清除浮动;
- 浮动元素之间没有垂直margin的合并。
清除浮动方法
1. 增加空白标签(不推荐)
在需要清除浮动的元素后面增加一个空白标签,设置其类为clear(类名任意)。
优点:通俗易懂,书写方便。
缺点:添加许多无意义的标签,结构化较差。
.clear{
clear: both;
}
clear的属性值有left、right、both、none和inherit。
- left:不允许左侧元素浮动;
- right:不允许右侧元素浮动;
- both:整体不允许浮动;
- none:默认值,允许浮动元素;
- inherit:从父元素继承clear属性。
2. 父级添加overflow方法(不推荐)
父级设置overflow:hidden,通过触发BFC的方式实现清除浮动的效果。
优点:代码简单(慎重使用,若该父盒子里还有position定位会引起麻烦)
缺点:代码增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。
ps:父级添加overflow:hidden,display:table也可以清除浮动。
3. 使用after伪元素清除浮动(较常用)
after方式为空标签的升级版,好处是不用单独加标签了,给父级加上clearfix即可。
优点:符合闭合浮动思想,结构语义化正确;
缺点:由于IE6-7不支持:after,使用zoom:1,触发haslayout。
.clearfix:after{
content:"";
display:block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
*zoom:1;
/* zoom:1,就是ie6清除浮动的方式(其他浏览器不能识别,是指
ie7以下的版本其他浏览器看到*就不往下读了,不解析这句。) */
}
4. 使用before和after双伪元素清除浮动(较常用)
给父级元素添加clearfix。
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}