1. 浮动

相信很多很多朋友在刚开始接触使用浮动的时候肯定会遇到各种未解之谜，明明 我的设置没错呀，怎么就出错了呢，就比如下图

1.jpg

我需要让三个子元素排成一行，已经都给float：left；了，但为什么没按照我想的来呢，于是我各种找原因，我试着给第三个子元素float：right；不行，然后又是转display：inline-block；还是不行，到底问题出在哪呢，我又检查了一遍我设的样式，这回终于发现问题所在了

.div {
  width: 600px;
  height: 400px;
  background: rgb(255, 180, 180);
}
.one {
  width: 200px;
  height: 200px;
  background: rgb(220, 255, 180);
  float: left;
}
.two {
  width: 200px;
  height: 200px;
  background: rgb(180, 206, 255);
  float: left;
}
.three {
  width: 200px;
  height: 200px;
  background: rgb(255, 180, 230);
  float: left;
}

原来是三个子元素宽的和超过了父元素的宽，这样的话前两个子元素占完空间之后留下的空间已经不足以让第三个子元素挤进去了，所以就被挤掉了，那这时候该怎么解决呢，其实很简单只需把父元素的宽度加宽或者把子元素的宽度减少就行了。

2. 关于高度塌陷问题

浮动（float）的框可以左右移动，直至它的外边缘碰到包含框或另一个浮动框的外边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级元素的布局而只会影响内联元素（通常是文本）的排列，文档中的普通流就表现得如同浮动框不存在一样。当浮动框高度超出包含框的时候，就会出现包含框不会自动升高来闭合浮动元素（“高度塌陷”现象）。

通俗点来说，就是如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候，那么它的高度就会踏缩为零。这是因为浮动元素脱离了文档流，包围它们的父块中没有内容了，所以“”塌陷“”了。

如下图所示，我把父元素的宽高注释掉，就会出现下图中的情况，****浮动元素脱离了文档流，包围它们的父块中没有内容了，所以就塌陷了

4.jpg

.div {
 /* width: 600px;
  height: 400px; */
  background: rgb(255, 180, 180);
}
.one {
  width: 200px;
  height: 200px;
  background: rgb(220, 255, 180);
  float: left;
}
.two {
  width: 200px;
  height: 200px;
  background: rgb(180, 206, 255);
  float: left;
}
.three {
  width: 200px;
  height: 200px;
  background: rgb(255, 180, 230);
  float: left;
}

把父元素宽高注释掉之后

6.jpg

那么这种情况该怎么办呢

1， 把父元素设置一个高度就ok

2， ⽗元素后⾯设置一个空元素并设置清除浮动 clear：both；也是ok的

3， 给父元素设置一个overflow：hidden；也是可以的

4， 还可以通过伪元素来解决（注意不是伪类），在css里写上其样式，通过CSS伪元素在容器内部元素最后添加了一个看不见的点“.”，并且赋予clear属性来清除浮动。（如下图）

.clear::after {
  content: "";
  display: block;
  height: 0px;
  line-height: 0px;
  clear: both;
}

还有就是也可以给父元素加上浮动，也可以解决问题

本人学识有限 文章多有不足
若有错误 请大方指出 以免误导他人