浮动元素的性质和清除浮动的方法

浮动元素的性质和清除浮动的方法

一浮动元素的性质
1、浮动的元素会脱离标准文档流，具有行块二象性（既具有行内元素的性质，也具有块级元素的性质），比如span元素浮动之后，可以直接设置宽高，不需要再转块。
css中有三种方法可以让元素脱离标准文档流。①浮动②绝对定位③固定定位
2、浮动的元素会有字围现象，文字会围绕着浮动的元素。
3、竖直方向上的margin塌陷现象消失。

二浮动元素会带来的影响
1、浮动的元素不能撑出父亲的高。
2、两个设置高度的div1、div2内部如果有浮动的元素，div2中浮动的元素会去追div1中的浮动元素。

三、清除浮动的四种方法
1、给后面一个盒子，也就是div2设置css属性，clear:both;(意思就是清除上下左右浮动元素带来的影响)。
缺陷：两个父亲div1和div2还是没有高，而且margin失效了。
2、隔墙法：在div1和div2之间，再加一个div，给这个div设置clear:both;属性。
缺陷：：两个父亲div1和div2还是没有高，而且margin失效了。
优势：可以用这个div的身体，来设置高度，模拟margin。
3、内墙法：在div1和div2内部，所有儿子的最下面，添加一个div给这个div设置clear:both;属性。
特点：现在margin好用了，并且盒子也有高了，所有的事情都解决了！但是还是有问题：
HTML标签有点放置的太多了。这些标签页没有语义，看起来不爽。
4、给div1和div2添加overflow:hidden;属性。（偏方，但是很好用，工作中常用到这个方法）
5、给父级div定义伪类：after和zoom（推荐使用）
/清除浮动代码/ .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}

总结：
清除浮动的方法有很多都是在面试中才有意义，工作中我们常用
①我们总喜欢在每个内部有浮动的父盒子上加上overflow:hidden;
②我们总喜欢在两个大部分之间隔一堵外墙。（这么写会让别人觉得你至少得有一年工作经验）