CSS清除浮动的常用方法

最新推荐文章于 2024-09-05 04:25:37 发布

天方夜歌

最新推荐文章于 2024-09-05 04:25:37 发布

阅读量197

点赞数

分类专栏： CSS HTML JavaScript 文章标签： CSS 浮动

本文链接：https://blog.csdn.net/sun_cui_hua/article/details/108217638

版权

HTML 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

JavaScript

1 篇文章 0 订阅

订阅专栏

在前端开发过程中使用float产生的问题

浮动溢出和高度塌陷

因为浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。

而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。

解决浮动引起的问题有多种方法，但有些方法在浏览器兼容性方面还有问题。

1，在浮动元素后使用一个空div元素 clear:both

 <style type="text/css">
        .claer {
            clear: both;
        } / ****清除浮动的方法****/
        .container {
            width: 500px;
            border: 2px solid #333;
        }
        
        .box01 {
            width: 100px;
            height: 100px;
            background: blue;
            color: #fff;
            float: left;
        }
        
        .box02 {
            width: 100px;
            height: 100px;
            background: red;
            color: #fff;
            float: left;
        }
        
        .box03 {
            width: 100px;
            height: 100px;
            background: green;
            color: #fff;
            float: left;
        }
        
        .box04 {
            width: 500px;
            height: 200px;
            background: orange;
        }
    </style>


<body>

    <div class="container">
        <div class="box01">11111111</div>
        <div class="box02">22222222</div>
        <div class="box03">333333333</div>
        <div class="claer"></div>
    </div>
    <div class="box04">4444444</div>
</body>

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度

优点：简单，代码少，浏览器支持好，不容易出现怪问题

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不爽

2，父级div定义伪类:after 和 zoom

       .clearfix:after{
            content: "";
            height: 0;
            display: block;
            visibility: hidden;
            clear: both;
        }
        .clearfix {
            zoom: 1;
        }
        .container {
            width: 500px;
            border: 2px solid #333;
        }
        
        .box01 {
            width: 100px;
            height: 100px;
            background: blue;
            color: #fff;
            float: left;
        }
        
        .box02 {
            width: 100px;
            height: 100px;
            background: red;
            color: #fff;
            float: left;
        }
        
        .box03 {
            width: 100px;
            height: 100px;
            background: green;
            color: #fff;
            float: left;
        }
        
        .box04 {
            width: 500px;
            height: 200px;
            background: orange;
        }
    </style>

<body>
    <div class="container clearfix">
        <div class="box01">11111111</div>
        <div class="box02">22222222</div>
        <div class="box03">333333333</div>
    </div>
    <div class="box04">4444444</div>
</body>

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题

优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持。

3，父级div定义 overflow:hidden

<style type="text/css">
        .container {
            width: 500px;
            border: 2px solid #333;
            zoom: 1;
            overflow: hidden;
        }
        
        .box01 {
            width: 100px;
            height: 100px;
            background: blue;
            color: #fff;
            float: left;
        }
        
        .box02 {
            width: 100px;
            height: 100px;
            background: red;
            color: #fff;
            float: left;
        }
        
        .box03 {
            width: 100px;
            height: 100px;
            background: green;
            color: #fff;
            float: left;
        }
        
        .box04 {
            width: 500px;
            height: 200px;
            background: orange;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box01">11111111</div>
        <div class="box02">22222222</div>
        <div class="box03">333333333</div>
     </div>
    <div class="box04">4444444</div>
</body>

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

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

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。