清除浮动：

最新推荐文章于 2024-08-20 19:23:57 发布

可爱的奥特曼

最新推荐文章于 2024-08-20 19:23:57 发布

阅读量59

点赞数

本文链接：https://blog.csdn.net/a123003005/article/details/121203312

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>清除浮动</title>
       <style>
           /* 清除浮动一:
           1.给父盒子加overflow:hidden. */
           .bigbox{
               background-color: blueviolet;
               overflow: hidden; /* 解决:清除浮动（超出部分
               隐藏），只能在最大的div盒子用*/
           }
           .bigbox div{
               width:200px;
               height:200px;
               float:left;
               font-size:32px;
               color:white;
           }
           .box1{
               background-color: aqua;
           }
           .box2{
               background-color: red;
           }
           .box3{
               background-color: gold;
           }
           /* 清除浮动方式二: */
           .clearfix::after{ /* 伪元素:表示在当前类标签
           之后添加以下样式 */
               content:""; /* 内容 */
               display:block; /* 转换为块元素 */
               height: 0;
               visibility: hidden; /* 显示:隐藏 */
               clear: both; /* 两端清除浮动 */
           }
           /* 清除浮动方式三: 添加双伪元素，after（在什么之前
           before(在什么之后)*/
           .clearfix::after,.clearfix::before{
               content:"";
               display:table;
           }
           .clearfix::after{
               clear:both;
           }
       </style>
   </head>
   <body>
       <div class="bigbox">
       <div class="box1">方法</div>
       <div class="box2">丰富</div>
       <div class="box3">等等</div>
       </div>
   </body>
</html>

可爱的奥特曼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
清除浮动：

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>清除浮动</title> <style> /* 清除浮动一: 1.给父盒子加overflow:hidden. */ .bigbox{ backg...
复制链接

扫一扫