2019-03-28处理float后文字环绕

2019-03-28 本文已影响0人 Kason晨

其实我不太喜欢浮动，更喜欢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>