css 清除浮动详解介绍并附代码

最新推荐文章于 2024-10-27 23:30:00 发布

qq1208013747

最新推荐文章于 2024-10-27 23:30:00 发布

阅读量151

点赞数 1

分类专栏： css部分

本文链接：https://blog.csdn.net/ss043500/article/details/106821505

版权

css部分专栏收录该内容

7 篇文章

订阅专栏

清除浮动有三种方法
1 给父盒子写死高度
2 用clear: botn ==> 在这只简单说这个属性怎么用
3 overflow: hidden在这里插入代码片

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<style>
  .father {
    width: 500px;
    /* height: 500px; */
    border: 1px solid #000;
    background-color: pink;
  }

  .son {
    width: 100px;
    height: 100px;
    background-color: lime;
    float: left;
  }
  .clear {
    /* 看div最后一个 */
    clear: both;
  }
</style>
<body>
  <div class="father">
    <div class="son">1</div>
    <div class="son">2</div>
    <div class="son">3</div>
    <!-- 需要浮动元素最后面 手动添加一个块级元素 设置clear:both-->
    <div class="clear"></div>
  </div>
</body>

</html>

上面直接简单介绍一下下面说一下流行的方法利用伪类清除
::after // 当前标签内容后面添加一个标签并且选中了这个虚拟标签
::before // 当前标签前面

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<style>
  .father {
    width: 500px;
    /* height: 500px; */
    border: 1px solid #000;
    background-color: pink;
  }

  .son {
    width: 100px;
    height: 100px;
    background-color: lime;
    float: left;
  }

 /* 主流清除浮动的方法 */
  .clear::after {  /* 伪元素默认是行内样式 */
    /* content这个属性不能shao, 即使什么也不写 */
    content:'';
    /* 清除浮动 */
  	clear: both;
    /* 因为清除浮动是要一个块级元素 , 所以讲这个伪类元素变为块级元素 */
    display: block;
    height: 0;
    visibility: hidden;
  }
  
  .clear {
    *zoom: 1;  /*兼容ie: 67;*/
  }
</style>

<body>

  <div class="father clear">
    <div class="son">1</div>
    <div class="son">2</div>
    <div class="son">3</div>
  </div>
</body>

</html>