清除浮动2021-08-25

最新推荐文章于 2024-11-11 00:01:33 发布

goat-on-the-way

最新推荐文章于 2024-11-11 00:01:33 发布

阅读量83

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/sinat_41746597/article/details/119902903

版权

本文介绍了在网页布局中如何解决浮动元素导致的父容器高度塌陷问题。通过讲解和展示不同清除浮动的方法，包括使用`overflow:hidden`、`clear:both`、伪元素以及额外标签法，帮助开发者理解并掌握这些技术，确保页面布局的正常显示。

摘要由CSDN通过智能技术生成

清除浮动

浮动原因：容器子元素都浮动，浮动脱离文档流不占据位置，而容器又不便于设置
高度时，容器此时的高度会为0，会影响到后面标准流的内容

<ul class="test">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<style>
	li{
      width: 200px;
      height: 150px;
      background-color: aqua;
      float: left;
    }
</style>

利用overflow属性清除

ul{
    overflow:hidden;
}

利用clear属性清除

li:last-child{
    clear:both;
    float:none
}

父容器加伪元素

ul::after{
    content:'';
    display:block;
    clear:both;
    height:0;
    visibility:hidden;
}
//--------------
ul::before{
      content: "";
      display: table;
}
ul::after{
    content: "";
    display: table;
    clear: both;
}

额外标签

 <ul class="test">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <!-- 额外标签法，隔墙法 。新增的标签必须是块级元素-->
    <!-- <li></li> -->
  </ul>