css浮动效果造成父元素高度为0，解决

1. 子元素浮动时，会造成父元素高度为0。会造成后面的元素样式混乱。

<div class="outer">

  <div class="inner"></div>

  <div class="inner"></div>

  <div class="inner"></div>

</div>

2. 通过父元素添加:after样式解决。原理相当于末尾添加一个子元素设置其浮动效果清除。

1) :after在元素内末尾添加内容

2) content: ''; 末尾添加的内容

3) display: block; 设置其为块级元素

4) clear: both; 清除浮动效果

.inner {

  width: 200px;

  height: 50px;

  background: #aadddd;

  float: left;

}

.outer:after {

  content: '';

  display: block;

  clear: both;

}

巴特西

css浮动效果造成父元素高度为0，解决

最新文章

热门文章