css 清除浮动 & BFC

时间:2024-09-30 17:03:56

前言:这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方,请大家指正,我会持续更新!

  文档流的概念:html 中 block 块元素默认是单独占据一行的,从上到下排列,也就是我们说的文档流。

  脱离文档流的概念:A 元素定义了 float 属性之后,就会"浮"起来,原来占据的空间由后面的 B 元素占据。

  如果浮动起来的 A 元素和 B 元素发生重叠,浮动起来的 A 元素就会覆盖 B 元素。

  浮动元素具有内联元素的特性,不在单独占据一行,相邻的浮动元素,最前面的具有 left 属性值的排在最左边,最前面的具有 right 属性值的排在最右边。

  当多个浮动元素一排容不下时,就换行。

  浮动会带来各种布局问题,主要是父容器塌陷(子元素在父元素外面,影响后面的布局),也就有各种解决方案,利用clear属性清除浮动或者使父容器形成 BFC。

利用 clear:both 清除浮动

  在浮动元素后面在创建一个空的非浮动的 div(inline元素不可以),并赋予属性 clear:both;

  实际应用中我们更多采用 :after 伪元素加在父容器上来清除浮动,定义一个 clearfix 的 class,然后给它添加一个 :after 伪元素,它会在父容器的内容最后面在添加一个看不见的块元素,我们给它定义 clear:both;

/* 清除浮动 */
.clearfix:after {
content: '';
display: block;
height: 0;
clear: both;
font-size: 0;
visibility: hidden;
}
.clearfix {
/*触发hasLayout,这又涉及到IE浏览器hack的知识*/
zoom: 1;
}

BFC 学习

  父容器形成 BFC 可以解决父容器内部子元素浮动引起的塌陷问题。

  BFC 元素特性就是不论内部怎样,都不会影响外部布局。

  如何触发BFC?

  • float 值为 left\right
  • overflow 值为 auto  |  scroll  |  hidden
  • display 值为 table-cell  |  table-captain  |  inline-block
  • position 值为 absolute 或 fixed

  我们可以给父容器添加这些属性形成 BFC,达到“清”浮动(包含浮动)。

  div 设置 float 属性之后会产生 inline-block 特性,不会占据一整行了。

  position:absolute 会使父容器脱离文档流,虽然打成了目的,但父容器的位置问题又来了。

  overflow:auto  |  scroll 有时候会出现滚动条。

  overflow:hidden 需要确定不会出现溢出裁剪,很多企业不让用 overflow,我们需灵活掌握。

  最后,Nicolas Gallagher 大师提供了一种更简便的方法,用的是 display:table。

    .clearfix:before, /*:before处理margin上下重叠*/
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}

  这里的 :before 它是来处理 margin 上下重叠的;

margin 重叠

  上下两个 div,上面的赋予 margin-bottom:20px,下面的赋予 margin-top:10px,那么两个div之间的间距是多少呢?

  两个 div 之间的间距是 20px,因为发生了 margin 重叠,两个值那个大,间距就是哪个。

  上面说的是上下两个 div,那么一个 div 在另一个 div 中呢?情况也是一样的,会发生重叠,只是变成了 top-top,bottom-bottom 重叠。

  两个相邻的元素,嵌套的元素,只要它们之间没有阻挡,就会发生 margin 重叠。

  margin重叠解决方法:

  上下两个 div,这种情况一般不会用到,你看效果图的时候,一般都只会给其中一个 div 赋予 margin 的,都没有颜色,你也看不出来谁是谁,上面的列子我只是说存在这个情况。

  内外嵌套的 div,很多时候会见到:

  • 我们可以在它们之间加个阻碍,父元素或者子元素加个透明边框 border:1px solid transparent; 视情况可以具体到上边框还是下边框
  • 父元素或者子元素加个 padding:1px;视情况可以具体到上 padding 还是下 padding
  • 让父元素和子元素不在同一个 BFC,视情况给它们哪个触发 BFC