关于css浮动问题

最新推荐文章于 2023-10-18 21:02:51 发布

Buddha_ITXiong

最新推荐文章于 2023-10-18 21:02:51 发布

阅读量525

点赞数

分类专栏： css 文章标签： css清除浮动

本文链接：https://blog.csdn.net/Buddha_ITXiong/article/details/79716770

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

浮动产生的原因

一般在给父级盒子下面的子元素设置了浮动属性的情况下，会导致父元素盒子没有被撑开。如下代码中分别给left,right设置了浮动属性，高度，背景色。父元素也同样设置了背景色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0"/>
    <title>浮动</title>
    <style>
        *{margin: 0;padding: 0;}
        .box{width: 400px;background-color: #0C0C0C;}
        .left,.right{width: 150px;height: 150px;float: left;}
        .left{background-color: #0b97c4;}
        .right{background-color: #00d6b2;}
    </style>
</head>
<body>
      <div class="box">
          <div class="left"></div>
          <div class="right"></div>
      </div>
</body>
</html>

看效果图：

从效果图中我们并没有看到父元素背景色，因为它下面的子元素都设置了浮动属性脱离了文档，因此我们需要清除浮动

清除浮动的方法

1:直接给父元素设置一个高度值。高度塌陷是因为给浮动元素的，此方法不适用于浮动元素高度不确定的情况

2:在浮动元素的下面添加一个空的div并给其加上浮动属性：

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
    <div style="clear: both"></div>
</div>

3:在浮动元素下面添加一个br元素并直接给其添加clear属性，设置both,类似于方法2

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
    <br clear="both">
</div>

4:给父元素设置属性display:inline-block

<div class="box" style="display: inline-block">
    <div class="left"></div>
    <div class="right"></div>
</div>

5:给父元素设置属性overflow:hidden

<div class="box" style="overflow: hidden;">
    <div class="left"></div>
    <div class="right"></div>
</div>

6:使用after伪类方法，此方法为主流，推荐使用，原理就是给父元素添加after伪类，在其后面添加一个空内容的块状元素

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

Buddha_ITXiong

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于css浮动问题

浮动产生的原因一般在给父级盒子下面的子元素设置了浮动属性的情况下，会导致父元素盒子没有被撑开。如下代码中分别给left,right设置了浮动属性，高度，背景色。父元素也同样设置了背景色&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta nam
复制链接

扫一扫