清楚float浮动的四种方法

1、对父级设置适合CSS高度

对父级设置适合高度样式清除浮动，这里对“.divcss5”设置一定高度即可，一般设置高度需要能确定内容高度才能设置。

2、clear:both清除浮动

为了统一样式，我们新建一个样式选择器CSS命名为“.clear”，并且对应选择器样式为“clear:both”，然后我们在父级“</div>”结束前加此div引入“class="clear"”样式。这样即可清除浮动。

3、父级div定义 overflow:hidden

对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。

为什么加入overflow:hidden即可清除浮动呢？

那是因为overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动。Css overflow:hidden清除浮动方法DIVCSS5推荐使用。

4.在父元素使用.clearfix()

.clearfix() {
  *zoom: 1;
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
    // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    line-height: 0;
    clear: both;
  }
}

 

转载于:https://www.cnblogs.com/hanxuming/p/6186570.html