其实我不太喜欢浮动，更喜欢flex布局。不过有时候浮动还是比较有用的。
现在我们来处理一个问题。破掉float后文字环绕。
处理前
处理后
处理后
其实是要在环绕文本哪里加一个overflow属性，属性值只要不是visible都可以。
可以是：
overflow：auto，
overflow：hidden，
或者overflow：scroll
这其实属于BFC块级格式上下文；
还有很多属性可以设置BFC：
如下
· float 的值不是 none。
· position 的值不是 static 或者 relative。
· display 的值是 inline-block、table-cell、flex、table-caption 或者inline-flex
· overflow 的值不是 visible
当然也有新的方式，不过浏览器支持度不太好；
创建 BFC 的新方式
使用overflow或其他的方法创建BFC时会有两个问题。首先，这些方法本身是有自身的设计目的，所以在使用它们创建BFC时可能会产生副作用。例如，使用overflow创建BFC后在某些情况下可能会看到出现一个滚动条或者元素内容被裁切。
这是由于overflow属性的设计是用来让你告诉浏览器如何定义元素的溢出状态的。浏览器执行了它最基本的定义。
即使在没有任何不想要的副作用的情况下，使用 overflow 也可能会让其他开发人员感到困惑。为什么 overflow 设置为 auto 或 scroll?最初的开发者的意图是什么?他们想要这个组件上的滚动条吗?
最安全的做法应该是创建一个 BFC 时并不会带来任何副作用，它内部的元素都安全的呆在这个迷你布局中，这种方法不会引起任何意想不到的问题，也可以理解开发者的意图。CSS 工作组也十分认同这种想法，所以他们定制了一个新的属性值：display:flow-root。
flow-root 浏览器支持情况
你可以使用display:flow-root安全的创建BFC，来解决上文中提到的各种问题：包裹浮动元素、阻止外边距叠加和阻止围绕浮动元素。
image.png
浏览器对该属性的支持目前还是有限的，如果你觉得这个属性值很方便，请投票去让Edge也支持它。
本文代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.outer {
border: 5px solid rgb(214,129,137);
border-radius: 5px;
width: 450px;
padding: 10px;
margin-bottom: 40px;
}
.float {
padding: 10px;
border: 5px solid rgba(214,129,137,.4);
border-radius: 5px;
background-color: rgba(233,78,119,.4);
color: #fff;
float: left;
width: 200px;
margin: 0 20px 0 0;
}.text {
overflow: auto;
}
</style>
</head>
<body>
<div class="outer">
<div class="float">I am a floated element.</div>
<div class="text">I am textI am a floated element.I am a floated elementI am textI am a floated element.I am a floated element.</div>
</div>
</body>
</html>
网友评论