7.css-清除浮动

理论：<div><p></p></div>这个场景中，若给p一个高度，div会被撑起来，若再给p一个浮动，那么div就撑不起了了，即：在标准流中儿子的高度可以撑起父亲的高度；在浮动流中，儿子的高度撑不起父亲的高度。

问题：div1和div2没有设置高度，蓝色和黄色的是p标签，p标签是设置了高度，但是把p标签设置为浮动后，成了右图的样子。

而我想要最下面那样的效果，为什么？怎么办？

为什么？

因为div1和div2没有 高度，在浮动流中，子div的高度不能撑起父div的高度。

怎么办？使用清除浮动的方法：

方法一：给div1设置一个高度即可。

方法二：在企业开发中，标签中能不给高度就尽量不要给高度，那么怎么解决呢？将box2这个div设置一个属性clear,clear取值为none、left、right、both。

none：默认取值，按照浮动的排序规则来排序，即左浮找左浮，右浮找右浮；left：不要找前面左浮的元素；right：不要找前面右浮的元素；both：不要找前面左浮和右浮的元素。注意：这个方法一旦使用，这个box2的div的margin-top值就失效了。

为什么失效？？？？？因为上面那个div是没有高度的，你给下面这个div设置一个margin-top，就相当于第二个div的margin-top是对body而言了，而body和第二个div是父子关系，前面说了，在父子关系中，子div的margin-top对父div是无效的，父亲和儿子会一起被顶下来，解决办法就是给父div一个border，而企业开发中，是不可能给body一个border的。

方法三：

       外墙法：给两个盒子中间添加一个额外的块级元素，给这个额外的块级元素添加一个clear:both;即可。为什么呢？给两个盒子中间添加一个块级元素，如果不添加clear.both;的话第一个盒子会飘在这个额外添加的块级元素上面，添加后这个块级元素就像一堵外墙似儿的放在那里，第二个盒子在浮动的时候，本来在标准流里就是第三行，所以浮动的时候还是第三行。

        注意：外墙法可以让第二个盒子使用margin-top，但是不能让第一个盒子使用margin-bottom。故我们在使用外墙法的时候，一般不给第一个盒子加margin-bottom属性，也不给第二个盒子加margin-top属性，我们给额外添加的块级元素加一个高度即可。

       内墙法：内墙法的思想和外墙法一样，只不过写法不一样而已，内墙法是把这个额外添加的块级元素写到第一个盒子的所有子元素最后，在第一个盒子里面，故叫内墙法。

       注意：内墙法可以让第一个盒子使用margin-bottom属性，也可以让第二个盒子使用margin-top属性。也可以给这个额外添加的块级元素添加高度属性。内墙法是撑起了这个盒子的高度，而外墙法没有。

       但是，在企业开发中，由于要添加很多“墙”，导师代码阅读性降低，并且前端开发的宗旨是：结构与样式分离，而内墙法和外墙法违背了这个宗旨，故企业开发中并不常用这个方法来清除浮动。

方法四：

伪元素选择器：什么叫做伪元素选择器？场景：<div>我是文字</div>在这个div的文字前面和后面分布加上“我爱你”，“么么哒”，怎么加？html方法就是在div的内容的前后加上标签即可。css3引入了一个新的方法，写法为：div::before{content:"我爱你"}          div::after{content:"么么哒"},并且也可以给这两个内容设置显示模式、宽高、背景色等等属性。注意：若想隐藏这个添加的内容，有一个visibility属性，给它设置为hidden即可。

这个时候再去清除浮动就恍然大悟了，使用伪元素选择器和内墙法和结合，既可以达到代码的结构和样式分离，又能够达到清除浮动的效果。写法为.box1::after{content:"";display:block;height:0; clear:both;visibility:hidden;}。但是IE6不支持css3，加上 .box1{*zoom:1}可以兼容IE6。

方法五（BFC）：overflow:hidden;属性是可以使盒子里面溢出的文字给隐藏掉，也可以清除浮动，写法为：.box1{overflow:hidden;}这个方法在企业开发中也常用，但它也不支持IE6。

并且这个overflow还有个作用，就是在父子div中，子div加一个margin-top属性，会把父子和儿子一起顶下来，解决办法是通过给父亲加一个border，但若不想加border怎么办，还有一个办法是给父亲加一个overflow:hidden;即可。