float
特性
- 包裹性;
- 块状化并格式化上下文;
- 破坏文档流,使父元素高度塌陷,在父元素中浮动元素高度不计在内;
- 没有任何 margin 合并
- 使浮动元素后的非浮动元素的文本环绕着浮动元素(对在其前面的元素无任何影响)
浮动之间的排列
元素设为浮动后会变为包裹性,若没有明确宽度,宽度则是元素里的内容宽度。浮动元素会生成一个块级框,这里的块级框是不换行的(其实也就是向左对齐的inline-block)
需要注意一点,在设置子容器宽度为50%,如果设置了具体的边框或者内外边距,两个子容器是无法并排的,因为剩余宽度无法容纳第二个子容器的宽度。
接下来我们来看一下子容器高度不一致时float为left的情况。
浮动与非浮动的排列
非浮动会无视浮动元素的位置直接占位,只有其中的文本会受到影响(进行环绕)。
关于clear的局限
为了使浮动元素之后的元素正常排列,我们的常规方法大都是使用clear,clear:both的作用本质是让自己不和 float元素在一行显示,并不是真正意义上的清除浮动,浮动元素依然撑不起父容器的高度。如果clear:both后面的元素使用margin上移至浮动元素同行范围内,依旧会发生文字环绕。
如果觉得clear足够用,建议采取伪元素的方式:
.clear:after{
content: ' ';
display: table;
clear: both;
}
由此可见,clear:both只能在一定程度上消除浮动的影响,要想完美地去除浮动元素的影响,应该利用BFC。
BFC:
特性
- 块级格式化上下文会阻止外边距叠加
当两个相邻的块框在同一个块级格式化上下文中时,它们之间垂直方向的外边距会发生叠加。换句话说,如果这两个相邻的块框不属于同一个块级格式化上下文,那么它们的外边距就不会叠加。 - 块级格式化上下文不会重叠浮动元素
根据规定,一个块级格式化上下文的边框不能和它里面的元素的外边距重叠。这就意味着浏览器将会给块级格式化上下文创建隐式的外边距来阻止它和浮动元素的外边距叠加。由于这个原因,当给一个挨着浮动的块级格式化上下文添加==负的外边距时将会不起作用===。 - 块级格式化上下文通常可以包含浮动
通俗地来说:创建了BFC的元素就是一个独立的盒子,里面的子元素不会在布局上影响外面的元素,反之亦然,同时BFC任然属于文档中的普通流。
触发条件:
- <html>根元素
float 除了none以外的值
overflow 除了visible 以外的值(hidden,auto,scroll )
display (table-cell,table-caption,inline-block)
position(absolute,fixed)
fieldset元素(实验中,不建议使用)
建议采取的BFC特性
为浮动元素的容器添加:
.lbf-content {
overflow: hidden;
}
.lbf-content {
display: table-cell;
width: 9999px;
}
添加overflow:hidden有个缺点,如果子元素要定位到父元素的外面可能会被隐藏,所以还是要视情况而用。
第二种会让连续英文字符换行,解决方法:
.word-break {
display: table;
width: 100%;
table-layout: fixed;
word-break: break-all;
}
总结
为浮动元素的父容器设置BFC,解决高度崩塌并且避免父容器外的元素上移产生文字环绕。
为浮动元素的相邻元素设置BFC,避免相邻元素内的文字环绕浮动元素。