深入理解css浮动带来的问题及解决方法（清除浮动）

为什么需要浮动

有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。

因为浮动可以改变元素标签默认的排列方式

浮动及其工作原理。

       浮动的元素可以向左或向右移动，直到它的外边 缘碰到包含元素(父元素)或另一个浮动元素的边框为止。要想使元素浮动 ，必须为元素设置一个宽度( width)。虽然浮动元素已不在文档流中，但是它浮动后所处的位置依然在浮动之前的水平方向上。因为浮动元素不在文档流中，所以文档流中的块元素表现得就像浮动元素不存在一样，下面的元素会填补原来的位置。有些元素会在浮动元素的下方，但是这些元素的内容并不一定会被浮动的元素遮盖。当定位内联元素时，要考虑浮动元素的边界，围绕浮动元素放置内联元素。也可以把浮动元素想象成被块元素忽略的元素，而内联元素会关注的元素。

内联元素可以实现浮动吗?

在css中，任何元素都可以浮动。不论浮动元素本身是何种元素，都会生成一个块级框。因此，对于内联元素，如果设置为浮动，会产生和块级框相同的效果。

浮动元素引起的问题和解决方法

浮动引起的问题

(1 )父元素的高度无法被撑开，影响与父元素同级的元素

(2 )与元素同级的非浮动元素会紧随其后(类似遮盖现象)。

(3 )如果一个元素浮动，则该元素之前的元素也需要浮动;否则会影响页面显示

的结构(即通常所说的串行现象)

解决方法（清除浮动）

1. clear清除浮动(添加空div法) 在浮动元素下方添加空div,并给该元素写css样式

 2.给浮动元素父级设置高度

父级同时浮动(需要给父级同级元素添加浮动)父级设置成inline-block,其margin: 0 auto居中方式失效

直接给父级添加overflow:hidden清除浮动方法 

另外一种万能清除法 after伪类清浮动

.float_ div:after{
    content.";
    clear:both;
    display:block;
    height:0;
    overflow:hidden;
    visibility:hidden;
   }
.float_ div{
    /* 兼容ie */
    zoom:1
}

清除浮动的本质是清除浮动元素脱离标准流造成的影响