清除浮动、BFC、伪元素选择器

清除浮动

概念

如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

原因:子元素浮动后脱离了标准流

解决：

给父元素设置高度

内容的高度高于父元素，父元素不会被撑开，影响了整体的布局

额外的标签

• 在父元素内容的最后面添加一个块级元素

• 给添加的块级元素设置 clear:both

缺点：在页面中添加额外的标签，页面的结构变得复杂

单伪元素清除法

用伪元素替代了额外的标签

基本写法

/* 伪元素替代额外的div  基本写法 */
.box::after {
  content: '';
  /* 转换为块元素 */
  display: block;
  clear: both;
}

完整写法

/* 伪元素替代额外的div  基本写法 */
.box::after {
  content: '';
  /* 转换为块元素 */
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

优点：给标签添加类就可以清除浮动

 

双伪元素清除法

.clear::before,
.clear::after {
  content: '';
  /*类似于table 作为块级表格来显示
  表格前后有换行符 */
  display: table;
}
.clear::after {
  clear: both;
}

给父元素设置overflow:hidden

• 直接给父元素添加overflow:hidden属性

  .clear {
    overflow: hidden;
  }

  好处：方便（内容溢出隐藏）

BFC

块格式化上下文(Block Formatting Context)

触发BFC会独立出来一个渲染区域，让处于BFC内部的元素与外部的元素相隔离，使内外元素不会相互受影响

BFC能够影响盒模型的渲染规范

怎么触发BFC

• 浮动元素float属性为left/right

• 定位元素position属性为absolute 和fixed

• 行内块元素 是BFC盒子

• html标签是BFC盒子

• overflow属性取值不为visible ，如auto，hidden

BFC盒子特点

• bfc盒子会默认包裹住内部子元素(标准流 ，浮动)---应用 清除浮动

• BFC盒子本身与子元素之间不存在margin的塌陷问题---应用 margin 塌陷

伪元素选择器

::before
::after

代码

  .box {
      }
​
      /* 在元素的内容的前面添加内容*/
      .box::before {
        content: 'width';
        color: red;
        font-size: 40px;
      }
      /* 在元素的内容的后面添加内容*/
      .box::after {
        content: 'word';
        color: blue;
      }