CSS如何消除浮动

浮动

当我们布局网页一般是先分成一个一个div区域，再逐一雕琢。但div默认行为（宽100%，多个div从上到下)在一些场景却不太适合，需要搭配float使用。
浮动: float, “浮动会脱离默认的文档流，”浮动层和默认文档层就好像ps工具中的两个图层，互相不搭理；
如果div容器不设置width、宽度由默认100%变为容器内容的宽度；
浮动的一组元素按照设置方向一行排布，没排完会有空白，如果一行排不下会自动换到下一行。溢出行为可以overflow自定义。
场景，从左到右， 网页分栏两三个div横向排列;ul标签构造菜单导航;~~
**

清除浮动

跟在浮动div后的正常div显示不正常，所以要在清除浮动。
1） 添加空div。 浮动的那一组div后添加一个空内容的div，空内容div上设置clear:both;样式清除浮动。后面的div按照默认文档流排列，没有跟浮动区重叠。
2） [推荐]伪类选择器。 浮动的那一组的div的父div上:after伪元素选择器 作用clear样式。清除浮动。后面的div按照默认文档流排列，但跟浮动的div发生重叠。
3) br标签。 浮动的那一组div最后加上br标签，因为br标签自带clear样式。浮动
当我们布局网页一般是先分成一个一个div区域，再逐一雕琢。但div默认行为（宽100%，多个div从上到下)在一些场景却不太适合，需要搭配float使用。