BFC和清除浮动

时间 2019-11-18

标签 bfc 清除浮动繁體版

原文原文链接

BFC：

特性

块级格式化上下文会阻止外边距叠加
当两个相邻的块框在同一个块级格式化上下文中时，它们之间垂直方向的外边距会发生叠加。换句话说，若是这两个相邻的块框不属于同一个块级格式化上下文，那么它们的外边距就不会叠加。
块级格式化上下文不会重叠浮动元素
根据规定，一个块级格式化上下文的边框不能和它里面的元素的外边距重叠。这就意味着浏览器将会给块级格式化上下文建立隐式的外边距来阻止它和浮动元素的外边距叠加。因为这个缘由，当给一个挨着浮动的块级格式化上下文添加负的外边距时将会不起做用。
块级格式化上下文一般能够包含浮动

通俗地来讲：建立了BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素，反之亦然，同时BFC任然属于文档中的普通流。css

触发条件：

<html>根元素
float 除了none之外的值html
overflow 除了visible 之外的值（hidden，auto，scroll ）浏览器
display (table-cell，table-caption，inline-block)布局
position（absolute，fixed）spa
fieldset元素（实验中，不建议使用）code

建议采起的BFC特性

.lbf-content { overflow: hidden; }

.lbf-content { display: table-cell; width: 9999px; }

第二种会让连续英文字符换行，解决方法：htm

浮动的缺点：.word-break { display: table; width: 100%; table-layout: fixed; word-break: break-all; }

没法撑起父元素。文档
同级别的兄弟元素会围绕在周围。

清除浮动经常使用的几种方式：

简单看看如何造成BFC：
（1）float值不为none，能够是left，right或both
（2）overflow为hidden或auto或scroll
（3）display为inline-block或table-cell或table-caption
（4）position为absolute或fixed
咱们能够对父容器添加这些属性使其变成BFC，从而达到“清浮动”效果

一、父级div定义伪类：after和zoom

.clearfloat:after{display:block;clear:both;content:"";}

.clearfloat{zoom:1}

2.在结尾处添加空div标签clear:both

添加一个空div，利用css提升的clear:both清除浮动，让父级div能自动获取到高度it

3.父级div定义height

父级div手动定义height，就解决了父级div没法自动获取到高度的问题；不推荐使用，只建议高度固定的布局时使用io

4.父级div定义overflow:hidden

只推荐没有使用position或对overflow:hidden理解比较深的朋友使用