CSS：浮动

浮动盒子（float）可以设置为向左或向右，即一直向左或向右移动，直到碰到父级边缘或另一个浮动盒子。设置为浮动的元素宽度会收缩为适应其内容的最小宽度，除非手动设置宽度（width/min-width/max-width）。

浮动元素会脱离文档流，不会影响其他元素，但是其他元素中的文本内容会在排布时避开浮动元素，造成文本围绕浮动盒子的效果，据说这也是引入浮动元素的初衷。

想阻止其他元素包围在浮动元素周围，需要添加clear属性。图中图片浮动在右侧，粉色按钮包围浮动元素导致箭头不局中。

1.png

给粉色布局添加clear：right后，让出了浮动元素的位置，箭头居中。

2.png

需要注意的是的，添加了clear后，实际上是给粉色按钮部分添加了一个上边距，使其移动到浮动元素下方，这个时候如果想给粉色部分添加上边距，除非给定的值超过了clear属性带来的值，否则没什么效果。

总结一下浮动元素会导致后面的行盒子缩短，从而造成文本环绕效果，此外不会对周围元素有任何影响。

还有一种情况，假如我这里没有数据了，更多按钮也不显示了（没有清除浮动效果了），效果就会变成：

3.png

设置了浮动的图片脱离了文档流，包裹它的布局无法生成对应的高度，此时由于没有其他数据，也无法使用clear来创造足够的垂直外边距作为浮动元素的空间。

可以在布局里添加一个空标签，然后在空标签上清除浮动，不过这样出现一个多余标签会逼死心灵洁癖。

或者可以为添加伪元素解决：

.wrap:after{
  content: '';
  display: block;
  clear: right;
}

可以模拟额外的清除元素，同时也不避免加额外的元素。

image.png

参考《精通CSS:高级Web标准解决方案》