HTML和CSS相关

HTML

清除浮动

清除浮动是为了解决子元素浮动导致父元素高度塌陷的问题。

清除浮动的方式

• 子元素后添加一个新的元素，例如div元素，添加样式clear：both；
• 使用伪元素。

.parent::after{
  display:block;
  content:'';
  height:0;
  clear:both;
}

• 触发父元素BFC，Block Formatting Context,块级格式化上下文，是页面一个隔离的容器，是一块独立的渲染区域，与外界互不影响。内部的元素从上到下排列，上下相邻的子元素会发生margin重叠。BFC可以用来清除浮动（内部元素会参与高度计算）、防止被浮动元素覆盖（不会与浮动元素区域重叠）、防止外边距margin重叠（不同BFC不会发生margin重叠）。

触发BFC的条件：

• float不为none
• overflow不为visible
• position为absolute | fixed
• display为inline-block，table-cell，table-caption，flex，grid