FLOAT浮动
相关概念:
文档流:文档流是文档中可显示对象在排列时所占用的位置。
关于FLOAT:
- FLOAT特性:加了浮动的元素,会脱离文档流,沿着父容器靠左或靠右排列,如果之前已经有浮动的元素,会挨着浮动的元素进行排列。
- FLOAT取值:left,right,none(默认)
元素怎样浮动?
- 元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。
- 一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或者另一个浮动框的边框为止。
- 浮动元素之前的元素将不会受到影响
- 如果把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻。
简单示例
设置两个颜色不同的块,实现效果如下:
接下来为黄色的块设置浮动
实现效果如下图所示:
此时黄色方块在红色方块之上,黄色方块实现了浮动,不占据位置,脱离标准普通流的控制。
清除浮动
注:清除浮动,准确来说不是清除浮动本身,而是清除浮动所造成的影响。解决了父级元素因为子级元素浮动造成的内部高度为0的影响。
清除浮动的方法
利用clear属性清除float浮动
- 固定宽高:不推荐,不能把高度固定死,且不适合做自适应的效果。
- 父元素浮动:不推荐,因为父容器浮动也会影响到后面的元素。
- overflow : hidden (BFC规范),如果有子元素想溢出, 那么将会受到影响。
- display : inline-block (BFC规范), 不推荐使用,父容器会影响到后面的元素。
- 设置空标签:不推荐,会多添加一个标签。
- after伪类:推荐使用,是空标签的加强版。
下面我对利用after伪类清除浮动的方法进行示例:
.clearfix:before,
.clearfix:after {
display: table;
content: ""; /*不用有内容也可以*/
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
这种方法优点明显,首推大家使用。