浮动和清除浮动

浮动

CSS中的float属性用来指定一个元素向左或向右浮动。浮动元素脱离文档的普通流，向左或向右移动，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
浮动元素周围的非浮动的块级元素按正常方式放置，就好像浮动元素不存在一样。但文本和行内元素会为浮动元素让出位置，围绕着浮动元素。

示例1

<div class="container">
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
    <div class="box box3">box3</div>
    <p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p>
</div>

p {
  margin: 0;
}

.container {
  width: 400px;
  border: 1px solid black;
  padding: 10px
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin: 2px 4px;
}

.box1{
  float: left;
}

.box2, .box3 {
  float: right;
}

如果包含框没有足够的宽度，后面的浮动元素会向下移动，如果浮动元素的高度不同，后面的浮动元素可能会被卡住

示例2

p {
  margin: 0;
}

.container {
  width: 300px;
  border: 1px solid black;
  padding: 10px
}

.box{
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin: 2px;
  float: left;
}

.box2 {
  height: 90px;
}

这里要注意的：

• 如果包含元素有padding，浮动元素会左右移动直到它的margin外边缘接触到包含元素的padding的内边缘
• 浮动的块级元素宽度不再占据整行，而是默认收缩到其内容的宽度

清除浮动

如果浮动元素的高度大于它们所在的父容器元素，由于浮动元素脱离文档流，无法撑开父元素高度，会使父元素的高度塌陷。这时就需要进行清除浮动。

清除浮动的方式主要有

• 在浮动元素后面加上一个空的div，设置clear属性
• 使用父容器元素的::after伪元素

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

• 使用BFC（块格式化上下文），例如对父元素使用

overflow: hidden;