清除浮动的方法及优缺点

来源：互联网发布：淘宝网借贷编辑：程序博客网时间：2024/05/19 01:59

为什么要清除浮动？

下面的例子是浮动对元素的影响

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <style type="text/css">        .box1 {            width: 100px;            background: #999;        }        .box2 {            width: 100px;            height: 40px;        }        .box3 {            width: 100px;            height: 40px;            background-color: #333;        }    </style></head><body>    <div class="box1">        <p class="box2"></p>    </div>    <div class="box3"></div></body></html>

这里写图片描述

box2加入float: left属性后的结果如下

这里写图片描述

如图所示，由于box1未设置高度，box3自动补位，如果这样的话，页面就会混乱。所以，我们需要清除这种浮动

以下是清除浮动的几种方法

（1）clear: both

通过给浮动元素下添加div标签并设置clear: both属性

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <style type="text/css">        .box1 {            width: 100px;            background: #999;        }        .clear {            clear: both;        }        .box2 {            width: 100px;            height: 40px;            float: left;        }        .box3 {            width: 100px;            height: 40px;            background-color: #333;        }    </style></head><body>    <div class="box1">        <p class="box2"></p>        <div class="clear"></div>    </div>    <div class="box3"></div></body></html>

这里写图片描述

优点：简单、代码少、浏览器支持好
缺点：增加了无意义的标签

（2）overflow: hidden

通过给浮动元素的父元素添加overflow: hidden属性来清除浮动

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <style type="text/css">        .box1 {            width: 100px;            background: #999;        }        .clear {            overflow: hidden;            zoom: 1;   /*处理兼容性问题*/        }        .box2 {            width: 100px;            height: 40px;            float: left;        }        .box3 {            width: 100px;            height: 40px;            background-color: #333;        }    </style></head><body>    <div class="box1 clear">        <p class="box2"></p>    </div>    <div class="box3"></div></body></html>

这里写图片描述

优点：简单、代码少、浏览器支持好
缺点：超出的内容会被隐藏

（3）加入after伪类

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <style type="text/css">        .box1 {            width: 100px;            background: #999;        }        .clear:after {            clear: both;            content: "";            display: block;                 visibility: hidden;        }        .box2 {            width: 100px;            height: 40px;            float: left;        }        .box3 {            width: 100px;            height: 40px;            background-color: #333;        }    </style></head><body>    <div class="box1 clear">        <p class="box2"></p>    </div>    <div class="box3"></div></body></html>

这里写图片描述

优点：浏览器支持好
缺点：代码多

第三种方法是现在许多浏览器所用的方法，所以清除浮动时最好用after伪类

（完）

阅读全文

0 0