css——消除浮动

最新推荐文章于 2024-06-09 20:17:27 发布

恨灵犀

最新推荐文章于 2024-06-09 20:17:27 发布

阅读量227

点赞数

分类专栏： css 文章标签：前端

本文链接：https://blog.csdn.net/henlingxi/article/details/122361659

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、为什么消除浮动

在很多情况下，我们不知道父盒子中需要几个子盒子不方便给父盒子高度，因此我们通过子盒子来撑开父盒子的高度。但是当子盒子浮动时，父盒子的高度将变成0，这将影响下面的标准流盒子。因此我们需要消除浮动。

<style>
       .father{
           width: 500px;
           background-color: seagreen;

       }
       .one{
           float: left;
           width: 100px;
           height: 200px;
           background-color: purple;
       }
       .tow{
           float: left;
           width: 100px;
           height: 200px;
           background-color: red;
       }
       .uncle{
           width: 250px;
           height: 250px;
           background-color: wheat;
       }
    </style>
</head>
<body>
  <div class="father">
        <div class="one"></div>
        <div class="tow"></div>
  </div>
  <div class="uncle"></div>
</body>

二、如何消除浮动

1.额外标签法

在浮动元素末尾添加一个空的标签（必须是块级元素）或其他标签。

2.给父级元素添加overflow

给父级元素添加overflow属性，将其属性值设置为hidden，auto或scroll

.father{

overflow: hidden;

width: 500px;

background-color: seagreen;

}

3.after伪元素法

.clearfix :after{

content: "";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

.clearfix{

/*IE6、7专用*/

*zoom: 1;

}

4.双伪元素法

.clearfix :before,

.clearfix :after{

content: "";

display: table;

}

.clearfix :after {

clear: both;

}

.clearfix{

*zoom: 1;

}

恨灵犀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css——消除浮动

一、为什么消除浮动在很多情况下，我们不知道父盒子中需要几个子盒子不方便给父盒子高度，因此我们通过子盒子来撑开父盒子的高度。但是当子盒子浮动时，父盒子的高度将变成0，这将影响下面的标准流盒子。因此我们需要消除浮动。<style> .father{ width: 500px; background-color: seagreen; } .one{ float: left;
复制链接

扫一扫