苏飞论坛

标题: 【零基础学习web前端】CSS-清除浮动 [打印本页]

作者: Amy 时间: 2018-12-5 16:42
标题: 【零基础学习web前端】CSS-清除浮动
【零基础学习web前端】CSS-清除浮动

【零基础学习web前端】教程目录导航

http://www.sufeinet.com/thread-24027-1-1.html

当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
下面介绍两个常见的清除浮动方法。
overflow：hidden 清除浮动

这个是给父级元素的样式，可以清除父级内使用float产生的浮动。
在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。

[CSS] 纯文本查看 复制代码

.news {

  background-color: #5a8dff;

  border: solid 1px black;

  overflow: hidden;

  }



h1 {

  float: left;

  }



.news p {

  float: right;

  }

[HTML] 纯文本查看 复制代码

<div class="news">

        <h1>苏飞论坛</h1>

        <p>欢迎你</p>

    </div>

下面分别是没有清除浮动的样式、加了清除浮动后的样式
(, 下载次数: 73)