关于浮动和BFC的理解

遇到过很多次关于 左边图片右边文字，文字环绕图片 ||  防止文字（或其他元素）环绕 的问题，今天给自己做一个小小的总结。

浮动根据官方的说法是：CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。   ||    浮动元素之后的元素将围绕它。   ||     浮动元素之前的元素将不会受到影响。

那么如何文字围绕图片？

效果如下：

如何防止文字（或其他元素）环绕？

这个涉及一个知识点，BFC布局。BFC(Block formatting context)定义：它是一个独立的渲染区域，只有block-level box参与，其中的元素按照规定的渲染规则进行布局，并且这个区域与外部毫不相干。

触发BFC的规则一般有：

1. 根元素
2. float属性不为none
3. position为absolute或fixed
4. display为inline-block, table-cell, table-caption, flex, inline-flex
5. overflow不为visible

一般应用到的地方在：

防止垂直 margin 重叠（属于同一个BFC的两个相邻块的margin会发生重叠，反之不属于一个BFC就可以防止margin重叠）

防止浮动子元素高度塌陷（计算BFC的高度时，浮动元素也参与计算）

防止文字（或其他元素）环绕（如果一个块级元素设置成了float，那么他的兄弟元素会环绕其布局。这里我们给文字区域加上overflow，文字所在的区域就产生了BFC，元素的左边总是触碰到容器的左边。）

 以上代码给文字区域的p标签加上  overflow: hidden; 就达到了以下效果

 

转载于:https://www.cnblogs.com/youyic/p/8744646.html