css什么是浮动？

浮动是一种非常有用的布局方式，它能够改变页面中对象的前后流动顺序。这样做的好处是，使得内容的排版变的简单，具有良好的伸缩性。

浮动是css布局非常强大的布局功能，也是理解CSS布局的关键问题所在，在CSS中，包括div在内的任何元素都可以浮动的方式显示。

浮动可以让设置了浮动属性的元素脱离标准普通流的控制，移动到其父元素中指定位置。

浮动影响

浮动元素会造成父元素塌陷

当给元素设置float之后,元素脱离文档流,父元素没有设置height,造成塌陷。

<div class="super">
    <div class="sub"></div>
</div>
.super{
    border:1px solid red;
}

.sub{
  float: left;
  background: green;
  border: 1px solid yellow;
  width: 100px;
  height: 100px;
}

清除浮动

清除浮动的目的是为了解决高度塌陷的问题,撑开浮动父元素。常用的一般有几种方法:

增加一个样式为clear:both的空标签

<p style="clear:both;"></p>

把上面这句标签放到浮动元素的父元素的最后。

原理:clear会在元素的margin-top之上增加一个清除区域(clearance),这个区域会在元素的margin-top上增加额外间隔,并且不允许浮动元素进入这个区域。

优点:方便,兼容性强。

缺点:多出许多无意义的标签,增加维护成本,而且稍不注意中间多了个空格会产生一段空白高度。

以上就是css什么是浮动？的详细内容，更多请关注0133技术站其它相关文章！