如何解决浮动带来的影响

如何解决浮动带来的影响？

浮动：

选择器名{
float:
}

浮动可以用来干什么？

设置了浮动的框可以向左(left)或向右(right)移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动并不存在于文档流之中。

浮动会带来什么影响？

当我们给子元素设置了浮动float:left或float:right或两者，但是没有给父元素设置高度时，就会出现父元素高度塌陷问题。因为浮动元素脱离了文档流，所以包围图片和文本的父元素盒子不占据空间。所以父元素盒子就不会被所浮动的内容展开，从而出现了高度塌陷。

而因浮动的出现的高度塌陷会导致：
1、背景不能显示
由于浮动产生，如果对父级设置了（css background背景）css背景颜色或css背景图片，而父级不能被撑开，所以导致CSS背景不能显示。

2、边框不能撑开
如果父级设置了CSS边框属性（css border），由于子级里使用了float属性产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

如何解决浮动带来的影响呢？

方法

1、给父级定义height。 缺点:扩展性不好

2、父级“overflow:hidden定位浮动开启”BFC布局 浮动/定位盒子的特点高宽都由内容撑开。 缺点:IE6会失效

3、空标签清除浮动。 缺点:违反了结构行为样式相分离的原则，生成无意义的空标签

<div style="clear:both"></div>

4、伪元素清除浮动 clearfix(推荐使用)

/* 在需要清除浮动的父元素的选择器后面加一个clearfix伪元素选择器 */
clearfix::after{
    content:'';
    display:block;
    clear:both;
}

比如说div2这个子元素需要浮动，那么父元素则需要清除浮动：

<!-- 只需在其类选择器后用空格隔开，输入clearfix伪元素即可清除浮动 -->
<div class="clear clearfix">
	<div class="div2"><div>
</div>