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

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

一浮动元素的性质 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; ②我们总喜欢在两个大部分之间隔一堵外墙。（这么写会让别人觉得你至少得有一年工作经验）