CSS浮动和清除浮动

最新推荐文章于 2025-06-02 17:01:47 发布

weixin_30896511

最新推荐文章于 2025-06-02 17:01:47 发布

阅读量56

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ruanxh123/p/5621615.html

本文详细解析了CSS中浮动(float)与清除浮动(clear)的使用方法及原理，通过实例展示了不同元素间的布局变化，并介绍了如何利用clearfix解决父级元素高度塌陷问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>专为调试用</title>
</head>
<style>
    /*基础样式*/
    div{width: 400px;height: 200px;}
    .box1{background-color: #ff8080;}
    .box2{background-color: #ff0000;}
    .box3{background-color: #804040;}
    .box4{background-color: #ffff80;}

    /*改变三个盒子的浮动和清除浮动属性，看下不同效果*/
    .box2{float: left;margin-left: 200px;}
    .box3{float: right;clear: left;}
    .box4{height: 500px;}
</style>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>
</html>

以上代码，复制下来。改变2，3，4盒子的样式，看下不同的效果，就清楚浮动和清除浮动的用法了。

下面是概念性的东西，假设有A和B两个元素，B为A的前一个兄弟元素，他们的父级元素为C：

1、A-float B-block，则另起一行浮动；

2、A-float B-inline-block，并且该兄弟元素加上该浮动元素宽度小与C，那么他们会同行显示，左浮动的话甚至会在兄弟元素之前显示。

3、A-float B-float，那么B会紧接着A元素【为float:right的时候B在A左侧】

4、A-block 不管A前面有几个浮动元素，A都会怼到最近的一个显示为block或者inline-block元素的下面

说完了浮动，下面说说，清除浮动：

1、对A元素设置clear: left 属性，表示的是当B浮动与A元素左侧，则会将A元素下移。好像B元素没有浮动效果一样，以下展示了一段清除浮动的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>专为调试用</title>
</head>
<style>
    /*基础样式*/
    body{width: 900px;}   /*浮动布局的时候父级元素一定要给宽度，不然缩放浏览器的时候浮动效果会乱*/
    div{width: 400px;height: 200px;}
    .box1{width: 4px; background-color: #ff8080;}
    .box2{background-color: #ff0000;}
    .box3{background-color: #804040;}
    .box4{background-color: #ffff80;}

    /*改变三个盒子的浮动和清除浮动属性，看下不同效果*/
    .box2{float: right;}
    .box3{float: right;}
    .box4{height: 500px;clear: right;}  /*清除box4右侧浮动*/
</style>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>
</html>

效果：

第二次编辑于2016/07/06

　　上面说了清除浮动的效果，而清除浮动的实际用途，并没有说明，下面说一个清除浮动常见的用途：

　　 .clearfix:after {content: ".";visibility: hidden;display: block;height: 0; clear: both;}

　　也就是给一个元素增加一个这样的类，效果是，在该元素内的末尾添加一个伪元素，并且，这个伪元素自带清除左右浮动的光环，而他本身是一个没有长度和宽度的块级元素，

是不是很bug，不知道这种方法是谁想出来的，真是太机智了。

　　好了，上面说到添加了一个这样的块元素，那么效果是怎么样的呢，请听我慢慢道来。如下面代码所示，父级元素.box1里面有两个浮动元素.box2和.box3，由浮动和块级元素的特性可知，此时的.box1只有一个全屏的宽度，并不会有高度（浮动起来的元素撑不起来父级的高度）。现在我们将clearfix这个类添加到.box1元素中，按照面的分析，此时.box1元素内除了两个浮动的元素，还有一个伪元素after，假如after没有clear:both属性，那么这个元素是会和浮动元素在同一行的（这个我们在最开始的浮动元素特性的时候就说了）。但是这个伪元素刚好是有清除浮动属性的，此时的after伪元素就不会和浮动元素在同一行了，于此同时，父级元素.box1的高度也被拉起来了，并且是和浮动元素中高度最大的那个元素一样，因为after是没有高度的！！

　　说了那么多，其实最终效果可以用一句话总结，给父级元素添加clearfix，可以使父级元素的高度，动态的和内部的浮动元素保持一致，（刚好包含内部所有浮动元素）。
　　以后见到这种用法，但是使用环境不一样的话，要举一反三，慢慢分析就好。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>为什么要清除浮动</title>
</head>
<style>
    .box2{background-color: #ff0000;width: 200px;float: right;}
    .box3{background-color: #804040;width: 200px;float: right;}
    .clearfix:after {content: ".";visibility: hidden;display: block;height: 0; clear: both;}
</style>
<body >
<div class="box1 ">
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    </div>
</body>
</html>