从图文混排到浮动之BFC清除浮动

来源：互联网发布：super kamagra 淘宝编辑：程序博客网时间：2024/05/22 00:30

从图文混排到浮动之BFC清除浮动

继续上一个疑问，现在p段落的内容是整个包裹住图片的，但如果我既想让p段落的内容显示在img图片的右侧，又想让它布局工整，即从上到下垂直无错位的排列要怎么做呢？

为了完成这个格式，我写下了这样一段代码：

<html><head><style type="text/css">img {width:50px;height:50px;float:left;}div.outer{background:yellow;overflow:hidden;}</style></head><body><h1>普通文档流<h1><img src="./left.jpeg" />13581832166 670915<div class="outer">hello<p>Hello,this is a test。Hello,this is a test。Hello,this is a test。Hello,this is a test。Hello,this is a test。Hello,this is a test。</p>testtest</div></body></html>

以上代码中包含了一张图片和一个文本段落，显示效果如下所示：
这里写图片描述

可以看到，虽然div紧邻img框，但是div并没有环绕图片，而是垂直的排列，这是因为outer类的overflow:hidden属性的设置触发了BFC机制。

BFC(block format content,格式化上下文)，在BFC中，元素布局不受外界的影响，我们往往利用该特性来清楚浮动元素对周围元素的影响，如常见的clear:both设置，触发BFC的机制有很多，除clear:both外，设置dispaly为table(或inline-block,table-cell,table-caption,flex,inline-flex等)，设置overflow为visible之外的其它值等等都会触发BFC

阅读全文

0 0