float高度塌陷问题解决方案

第一种方案 BFC(Block Formatting Context)

  块级格式化环境/布局环境

  BFC是CSS中的一个隐含属性,开启BFC该元素会变成一个独立的布局区域

  元素开启BFC的特点:

  1.开启BFC元素不会被浮动元素覆盖

  2.开启BFC元素子元素和父元素外边距不会重叠  

  3.开启BFC的元素可以包含浮动子元素

  开启BFC的方式:

  1.设置元素的浮动(不推荐)

  2.将元素设置为行内块元素(不推荐)

  3.将元素的overflow设置为一个非visible的值(副作用较小)

    常用方式为overflow:hidden/auto;

第二种方式:

  clear属性作用:消除浮动元素对当前元素所产生的影响。

  可选值:left: 消除左侧浮动元素对当前元素的影响

      right:消除右侧浮动元素对当前元素的影响

      both: 消除两侧中最大影响的那侧

  示例

  .box1::after {

  content:"“;

  display:block;

  clear:both;

}

猜你喜欢

转载自www.cnblogs.com/kukai/p/12263195.html