美文网首页Web前端之路前端开发
父元素如何围住浮动子元素

父元素如何围住浮动子元素

作者: 美少女战士bubble | 来源:发表于2016-07-05 20:52 被阅读1198次

当元素使用float属性,将脱离文档流,因此父元素便不会包围它。

<section>
      <div class="左栏">
        我是左栏
        我是左栏
        我是左栏
        我是左栏
      </div>
      <div class="右栏">
        我是右栏
      </div>
</section>
<footer>我是页脚</footer>

CSS样式如下:

section{
  border: 1px solid #333333;
  margin:0 0 10px 0;
}
.左栏{
  width: 100px;
  border: 1px solid #333333;
}
footer{
  border: 1px solid #333333;
}

此时浏览器中显示:

图1.这是常规文档流,可以看到块级元素section包围左栏和右栏元素,页面自上而下堆叠在一起

当对左栏加入css样式:float:left;浏览器中显示变为

图2.浮动左栏后,父元素section只能包住右栏,因为左栏已经脱离了文档流,于是footer也被提了上来,紧挨着前一个块级元素section

如果想父元素仍然要包围浮动的子元素,有三种方法:

  1. 为父元素设置overflow:hidden
    将section设置为:
section{
      border: 1px solid #333333;
      margin:0 0 100px 0;
      overflow: hidden;
}
图3.给父元素应用了overflow:hidden后,父元素又包围了浮动的左栏

这是overflow除了常规应用的另一个作用,它可靠的迫使父元素包含其浮动的子元素。
2.同时浮动父元素
第二种促使父元素包围子元素的方法是让父元素也浮动起来

section{
      border: 1px solid #333333;
      margin:0 0 10px 0;
      float:left;
      width: 100%;
}

浮动section后,不管子元素是否浮动,它都会紧紧包围住自己的子元素。因此,需要用width:100%再让section与浏览器同宽。
    此时由于section也脱离了文档流,footer会努力向上挤到它旁边,因此给footer应用clear:left;这样即可和第一种方法取到同样的效果。
3.添加非浮动的清除元素
    第三种方法是给父元素最后添加一个非浮动的子元素,然后清除该子元素。由于父元素一定会包含非浮动的子元素,通过把这个子元素放在浮动元素的下方,就可以保证父元素一定会包住这个元素,同时也会包住前面的浮动元素。

<section>
      <div class="左栏">
        我是左栏
        我是左栏
        我是左栏
        我是左栏
      </div>
      <div class="右栏">
        我是右栏
      </div>
      <div class="clear_me">        
      </div>
</section>
<footer>我是页脚</footer>

给新添加的元素添加CSS样式:

.clear_me{
  clear:left;
}

这样,浮动的元素就被父元素包围住了,如图3所示。

如果不想添加这个纯表现性的元素,还有一个用CSS来添加这个清除元素的方法。
首先,给section添加一个类

<section class="clearfix">
      <div class="左栏">
        我是左栏
        我是左栏
        我是左栏
        我是左栏
      </div>
      <div class="右栏">
        我是右栏
      </div>
</section>

接着给这个clearfix类使用这个规则:

.clearfix:after{
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

这样,浮动的元素又像图1一样被父元素包住了。这个clearfix规则最早是由程序员Tony Aslett发明的,它只添加了一个内容为句点的元素(句点是最小的内容)。

总结一下
强迫父元素包含其浮动子元素的方法有三种:

  1. 为父元素设置overflow:hidden;
  2. 浮动父元素,并且设置宽度width:100%;其后的元素要设置clear:both;
  3. 父元素内容末尾添加非浮动子元素,可以直接加一个空元素,也可以使用clearfix伪类添加。

相关文章

  • 父元素如何围住浮动子元素

    当元素使用float属性,将脱离文档流,因此父元素便不会包围它。 CSS样式如下: 此时浏览器中显示: 当对左栏加...

  • 子元素浮动导致父元素高度不够问题的解决方案

    1.子元素浮动导致父元素高度(父元素坍塌) 未设置高度的父元素中,如果有子元素浮动(float),由于子元素不占据...

  • 清除浮动

    1. 为什么要清除浮动? 父元素的高度是由子元素撑开的,且子元素设置了浮动,父元素没有设置浮动,子元素脱离了标准的...

  • 高度坍塌

    高度塌陷发生的场景 当父元素的高度由内容撑开,子元素浮动后(脱离文档流)子元素浮动后,父元素识别不了子元素的...

  • web清除浮动的几种方式

    浮动对页面的影响: 如果一个父元素中包含一个子元素,父元素没有设置高度,子元素再父元素中进行了浮动。那么这个时候,...

  • 实现淘宝静态页面学到的

    1、子元素浮动会对父级元素造成影响,比如在父元素无法确定高度的情况下,若所有子元素浮动,则父元素会变成一条线,这是...

  • css中清除浮动的方法

    浮动产生的原始,由于子元素浮动导致父元素无法撑开,父元素的高度为0,无法正常显示父元素的背景。例如: html代码...

  • 子元素浮动导致父元素脱离文档流

    子元素用了浮动(float:left),父元素会脱离文档流。解决方案:父元素清除浮动。 给父容器增加属性: 1.d...

  • 清除浮动与定位

    在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。 但是当为子元素设置浮动以后,子元素...

  • 高度塌陷 清除浮动 定位

    高度塌陷 父元素中的子元素浮动,导致父元素塌陷 开发中避免出现 写死父元素高度可以解决,但不能随子元素变化,不推...

网友评论

    本文标题:父元素如何围住浮动子元素

    本文链接:https://www.haomeiwen.com/subject/vduhjttx.html