浅析div的浮动

最新推荐文章于 2022-07-04 13:12:25 发布

原创最新推荐文章于 2022-07-04 13:12:25 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

14 篇文章

订阅专栏

本文通过多个实例详细解析了HTML中的div浮动布局，包括左浮动、右浮动及其对后续元素的影响，以及如何使用清除浮动来调整布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于在学习HTML元素浮动的时候，总是拎不清，比如什么时候需要浮动，什么时候需要清除浮动，左右浮动后，下一个元素显示在哪里，下下个元素显示在哪里等问题。而div的浮动布局问题在页面设计又是比较重要的，现自己学习总结了一下，供大家学习交流。

首先初始我们定义了6个div，它们的class是这样的，div、div1、div2、div3、div4、div5，它们的高度是一样的。都是200px。

接下来是他们的界面显示和HTML，CSS代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .div{
            width: auto;
            height:100px;
            background-color: #ff402a;
        }
        .div1{
            width: 200px;
            height: 200px;
            border: 1px solid #17ff42;
        }
        .div2{
            width: 210px;
            height: 200px;
            border: 1px solid #ff402a;
        }
        .div3{
            width: 220px;
            height: 200px;
            border: 1px solid #fffa38;
        }
        .div4{
            width: 230px;
            height: 200px;
            border: 1px solid #3513ff;
        }
        .div5{
            width: 240px;
            height: 200px;
            border: 1px solid #0dffeb;
        }
    </style>
</head>
<body>
    <div class="div"></div>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    <div class="div5"></div>
</body>
</html>

下面我们来进行一些浮动的小示例，以来帮助我们更清楚地了解浮动。

测试1：在div1上增加浮动设置

我们可以看到，在div1上增加浮动效果后，上面的红色div块没有受影响，而div2占据原div1的位置，从上图的红色框就可以看出来。div1好像浮动在上面（注意这里是浮动在本来它应该在的位置上面，因为它没有对上面的div造成影响，要说影响的话，他确实对下面的div有影响，因为下面的div上来了）

但是当我们在div1下添加一些文字或者<p>元素，在div2中添加文字等元素时，文字，p元素不会占据浮动div所在的位置，代码和效果如下图所示：

<body>
    <div class="div"></div>
    <div class="div1"></div>
    <p>jingchenyong1</p>jingchenyong2
    <div class="div2">jingchenyong3<br/>jingchenyong4<br/></div>
    <div class="div3"></div>
    <div class="div4"></div>
    <div class="div5"></div>
</body>

当然这种情况用的比较少。

测试示例2：在div1、div2上都增加左浮动设置，效果图如下所示：

.div1{
    width: 200px;
    height: 200px;
    border: 1px solid #17ff42;
    float:left;
}
.div2{
    width: 210px;
    height: 200px;
    border: 1px solid #ff402a;
    float:left;
}

测试示例3：在上面示例2的基础上，再div3上清除浮动

.div1{
    width: 200px;
    height: 200px;
    border: 1px solid #17ff42;
    float:left;
}
.div2{
    width: 210px;
    height: 200px;
    border: 1px solid #ff402a;
    float:left;
}
.div3{
    width: 220px;
    height: 200px;
    border: 1px solid #fffa38;
    clear: both;
}

测试示例4：在div1左浮动，在div2上右浮动

.div1{
    width: 200px;
    height: 200px;
    border: 1px solid #17ff42;
    float:left;
}
.div2{
    width: 210px;
    height: 200px;
    border: 1px solid #ff402a;
    float:right;
}

我们可以看到div3，占据了原来div1的位置，div2浮动在右边。

当我们清除div3的浮动时（clear：both、clear ：right、clear：left都可以）

.div1{
    width: 200px;
    height: 200px;
    border: 1px solid #17ff42;
    float:left;
}
.div2{
    width: 210px;
    height: 200px;
    border: 1px solid #ff402a;
    float:right;
}
.div3{
    width: 220px;
    height: 200px;
    border: 1px solid #fffa38;
    clear: left;
}

效果图如下：

测试示例5：div1和div2右浮动，代码和效果图如下：

.div1{
    width: 200px;
    height: 200px;
    border: 1px solid #17ff42;
    float:right;
}
.div2{
    width: 210px;
    height: 200px;
    border: 1px solid #ff402a;
    float:right;
}

在div3清除右浮动后的效果：

.div3{
    width: 220px;
    height: 200px;
    border: 1px solid #fffa38;
    clear:right;
}

以上是对div浮动效果的浅析，背后的原理理论还有待探讨~~