【零基础学习web前端】CSS-清除浮动

Amy

【零基础学习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>

下面分别是没有清除浮动的样式、加了清除浮动后的样式



可以看到 没有清除浮动之前，背景不显示，清除之后背景颜色显示。

clear：both 清除浮动

---

为了统一样式，我们新建一个样式选择器CSS命名为“.clear”，并且对应选择器样式为“clear:both”，
然后我们在父级“</div>”结束前加此div入“class="clear"”样式。这样即可清除浮动。
代码为：

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

.news {
  background-color: #5a8dff;
  border: solid 1px black;
   overflow: hidden; 
  }

h1 {
  float: left;
  }

.news p {
  float: right;
  }
  .clear{
      clear: both;
  }

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

<div class="news">
        <h1>苏飞论坛</h1>
        <p>欢迎你</p>
        <div class="clear"></div>
    </div>

效果同overflow：hidden。

liu

强烈支持楼主ing……

范范

强烈支持楼主ing……

惜

强烈支持楼主ing……

站长苏飞

我只是路过打酱油的。

竹林风

我只是路过打酱油的。