前端面试必问清单-----CSS清除浮动

一.为什么要清除浮动？
当父元素包裹的子元素有float属性的时候，子元素即脱离了文档流，不再受限于父元素。这样以来，子元素就无法影响父元素，就是说，父元素若没有固定高度的话，父元素的高度就不会随子元素的高度变化而变化。
二.怎么清除浮动？
清除浮动的8种方法，按需求选取。
1. 父级div定义伪类：after:和zoom
原理：利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而clearfloat利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。下面来看看其具体的使用方法：

.clearfloat{zoom:1}/*zoom(IE转有属性)可解决ie6,ie7浮动问题*/
.clearfloat:after{clear:both;display:block;content:"";visibility:hidden;height:0}

其中，clear:both指清除所有浮动，display:block;content:”“;对于FF/Chrome/Opera/IE8必不可少，visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清除浮动。
优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。
建议：推荐使用，建议定义公共类，以减少CSS代码。
2. 结尾处加空的div标签
原理：添加一个空div，利用css提供的clear:both清除浮动，让父级div能自动获取到高度

<style type="text/css"> 
    .div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;} 
    .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
    .left{float:left;width:20%;height:200px;background:#DDD} 
    .right{float:right;width:30%;height:80px;background:#DDD} 
    </style> 
    <div class="div1"> 
        <div class="left">Left</div> 
        <div class="right">Right</div> 
    </div> 
    <div class="div2"> 
        div2 
    </div>

优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法
3. 父级div固定高度
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
建议：不推荐使用，只建议高度固定的布局时使用
4. 父级div设置overflow:hidden属性
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

<style type="text/css"> 
        .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden} 
        .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%} 
        .left{float:left;width:20%;height:200px;background:#DDD} 
        .right{float:right;width:30%;height:80px;background:#DDD} 
        </style> 
        <div class="div1"> 
            <div class="left">Left</div> 
            <div class="right">Right</div> 
        </div> 
        <div class="div2"> 
        div2 
        </div>

优点：简单、代码少、浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。
5.父级div定义 overflow:auto
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度。

<style type="text/css"> 
    .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto} 
    .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%} 
    .left{float:left;width:20%;height:200px;background:#DDD} 
    .right{float:right;width:30%;height:80px;background:#DDD} 
    </style> 
    <div class="div1"> 
        <div class="left">Left</div> 
        <div class="right">Right</div> 
    </div> 
    <div class="div2"> 
    div2 
    </div>

优点：简单、代码少、浏览器支持好

缺点：内部宽高超过父级div时，会出现滚动条。

建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

6.父级div 也一起浮动
原理：所有代码一起浮动，就变成了一个整体
优点：没有优点
缺点：会产生新的浮动问题。
建议：不推荐使用，只作了解。

前端面试必问清单-----CSS清除浮动

猜你喜欢