前端入门-day3(CSS中浮动和清除浮动)

写在前面

浮动是CSS中一个相对比较麻烦的属性，与之伴随的一般是清除浮动。今天咱们一块儿来搞定浮动。

常见的用法

事实上，当咱们将一个元素设置成浮动时，达到的效果以下图：

这种版式相信你们都见过，不少杂志都会采用这种左边或者右边插图，文字环绕的效果。

另外一种常见的浮动的用法以下图：

即在某一行内，使某一部分右对齐，一般不会用margin实现，而是使用浮动。

浮动带来的问题

浮动的元素没法撑开父元素，即致使高度坍塌！！

来看下面的例子：

<div class="container">
  <div class="son1"></div>
  <div class="son2"></div>
</div>

.container {
  background-color: lightblue;
  font-size: 0;
}
.son1 {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: orange;
}
.son2 {
  width: 100px;
  height: 100px;
  float: right;
  background-color: lightgray;
}

当较大的方块浮动时，咱们能够看到他没法撑开父元素。一般状况下这不是咱们想要的结果，由于这会致使布局混乱。当父元素内的子元素所有浮动时尤为明显，父元素的高度会坍塌为0。

清除浮动

所以，当咱们用到了浮动，又不想出现这种状况的时候，就须要清除浮动。

清除浮动的方式可能有不少种，可是如今比较流行，我我的比较喜欢的方式以下：

首先，添加如下CSS：

.clearfix:after {
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

而后，在父容器上添加clearfix类，最后代码以下：

<div class="container clearfix">
  <div class="son1"></div>
  <div class="son2"></div>
</div>

.container {
  background-color: lightblue;
  font-size: 0;
}
.son1 {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: orange;
}
.son2 {
  width: 100px;
  height: 100px;
  float: right;
  background-color: lightgray;
}
.clearfix:after {
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

获得的效果以下：

浮动的元素就能够撑开父容器的高度啦！

总结

• 浮动的元素没法撑开父容器的高度，因此须要清除浮动
• 浮动能够很简单的实现右对齐。
• 浮动能够很简单的实现文字环绕效果。

所以，注意浮动的使用场景，而且在须要的时候清除浮动，就能够很好的控制浮动啦~