清除浮动的方式

时间 2019-11-09

标签清除浮动方式繁體版

原文原文链接

原文：

　　简书原文：https://www.jianshu.com/p/c7f02b50a8f5html

清除浮动的缘由

　　当给元素添加上浮动的时候，会形成页面布局上的一些意想不到的结果，如：子元素设置浮动没法撑起没有设置高度的父元素。segmentfault

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer{
            border: 1px solid black;
            width:300px;
        }
        .inner{
            width: 50px;
            height: 50px;
            background-color: #ff4400;
            margin-right: 20px;
            float: left;
        }
        .footer{
            background-color: #005FC3;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

　　能够看出本应包住3个 inner DIV的 outer DIV 却没有包住他们，此刻只剩一条由上下边框贴合组成的线，同时 footer DIV元素也跑到了三个浮动元素的底下。浏览器

清除浮动的方式

一、加高度

　　这是最简单的办法，加上高度以后，让包含框包含浮动框，不过这不适用于高度不明的包含框。布局

二、加额外空标签而且定义clear：both属性从而清除浮动

　　这是早期广泛使用的方法，可是对于有代码洁癖的人来讲，解决的不够完美，通常状况下不会使用这一种方式来清除浮动。由于这种清除浮动的方式会增长页面的标签，形成结构的混乱。网站

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer{
            border: 1px solid black;
            width: 300px;
        }
        .inner{
            width: 50px;
            height: 50px;
            background-color: #ff4400;
            margin-right: 20px;
            float: left;
        }
        .footer{
            background-color: #005FC3;
            width: 200px;
            height: 100px;
        }
        .clearfix{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="clearfix"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

三、经过将包含框设置成BFC从而清除浮动

3.一、经过伪类元素清除浮动

　　经过伪类元素实现清除浮动的效果，或者说经过伪类元素造成一个BFC的块框，从而让内部的float的元素不影响到外部元素的排版，也就是不会出现由于出现浮动而撑不起盒子高度的状况。
　　zoom:1：是为了兼容IE浏览器的haslayout布局属性，触发其布局效果，产生和BFC相似的效果。htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer{
            border: 1px solid black;
            width: 300px;
        }
        .inner{
            width: 50px;
            height: 50px;
            background-color: #ff4400;
            margin-right: 20px;
            float: left;
        }
        .footer{
            background-color: #005FC3;
            width: 200px;
            height: 100px;
        }
        .clearfix:after{  /*最简方式*/
            content: '';
            display: block;
            clear: both;
        }
        /* 新浪使用方式
        .clearfix:after{ 
            content: '';//设置内容为空
            height: 0;//高度为0
            line-height:0;//行高为0
            display: block;//将文本转为块级元素
            visibility: hidden;//将元素隐藏
            clear: both;//清除浮动
        }
        */
        .clearfix{ /*兼容 IE*/
            zoom: 1;
        }
    </style>
</head>
<body>
    <div class="outer clearfix">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

3.二、经过overflow:hidden清除浮动

　　经过给父元素设置overflow:hidden;来将父元素变成一个BFC，从而清除浮动。
　　缺点：这种方式会隐藏超出包含框的内容blog

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer{
            border: 1px solid black;
            width: 300px;
            overflow: hidden;
            zoom: 1;/*兼容 IE*/
        }
        .inner{
            width: 50px;
            height: 50px;
            background-color: #ff4400;
            margin-right: 20px;
            float: left;
        }
        .footer{
            background-color: #005FC3;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

3.三、经过绝对定位清除浮动

　　经过给父元素一样设置浮动属性，或者设置position:absolute来将包含框设置为BFC的布局，可是设置了这两个属性就会让父元素脱离了文档流从而产生其它的问题。文档

参考网站

　　http://www.javashuo.com/article/p-dwglonta-dh.htmlget