从头开始复习css之浮动

最近几天有点忙，所以没有什么时间来写东西，所以一晃就又是一周了。现在开始来复习浮动的概念吧。

一、 浮动最开始的作用

关于浮动，我们首先由这样一个图片来引入

这种排版是刚开始社会上广泛使用报纸、新闻的排版。我们发现无论是行内元素，还是块级元素，我们都没办法去完美兼容这种结构。为了解决这种图文混杂的排版，从而制定了float（浮动）的规则。具体的代码如下：

// css
img{
  float: left
}
// html
<p>刘亦菲...
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1970534157,1154154617&fm=58&bpow=1500&bpoh=2164"/>
</p>。2004年...

我们发现简简单单的使用了一个float就能解决掉这个问题了。那么接下来我们来看一下到底什么是浮动？

二、 使用浮动及浮动注意事项

说到浮动，先从字面上的定义开始说起吧。
浮动：顾名思义就是，使具有浮动的元素漂浮起来。那么我们为什么需要浮动呢？他除了做文字环绕之外，还有没有其他的用处呢？

我们这里有这样一个需求：将三个div/块级元素放在同一行上面

如果知道行内块元素的同学立马就能想到了，用’display:inline-block’规则呀。好那我们如他所愿，使用行内块元素，具体代码如下：

//css
*{
  margin: 0;
  padding: 0;
}
.common {
  width: 100px;
  height: 100px;
  display: inline-block;
		}
.son1{
  background-color: skyblue;
}
.son2{
  background-color: red;
}
.son3{
  background-color: blue;
}
// html
<div>
  <div class="son1 common"></div>
  <div class="son2 common"></div>
  <div class="son3 common"></div>
</div>

效果如下：

从上面的效果上面我们可以清楚的发现：使用inline-block虽然能够使得块级元素身处一行内，但是相邻块级元素之间有明显的空隙。
那我们用今天的浮动来试试看呢？我们修改一下css里面的.common规则

.common {
  width: 100px;
  height: 100px;
  /*display: inline-block;*/
  float: left;
}

效果如下：

通过上面的实际的例子我们发现在使用浮动之后，不仅多个块级元素在一行进行排列，而且相邻块级元素之间的空隙也不存在了。

通过上面的实例，我们初步的领略到了浮动所带来的好处。查阅资料我们发现浮动有三个可选的属性值：

• left 靠左浮动
• right 靠右浮动
• none 不要浮动

这里值得注意的一点是：
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
怎么理解呢？来看下面一段代码：

// css
*{
  margin: 0;
  padding: 0;
}
.parent{
  width: 400px;
  height: 100px;
  background: pink;
  margin: 200px;
}
.common {
  width: 100px;
  height: 100px;
  float: left;
  background: red
}
.parent>div:nth-child(even){
  background-color: skyblue;
}
// html
<div class="parent">
  <div class="common"></div>
  <div class="common"></div>
  <div class="common"></div>
</div>

效果如下：

从上面的效果我们就可以清楚的解读上面那句话了，子元素的浮动边界点是父元素的边界。所以值得我们注意的就是：如果我想要给浮动元素加边界，最常规的手段就是给元素来添加一个父盒子，来定位和约束子元素。

三、 浮动带来的负面印象

上面说了这么多浮动带来的好处和用处，那么是不是意味着，我们就可以无所顾虑、随意的使用浮动呢？
来看下面一段代码：

// css
*{
  margin: 0;
  padding: 0;
}
.parent-brother {
  width: 400px
  width: 400px;
  height: 100px;
  background: pink;
}
.common {
  width: 100px;
  height: 100px;
  float: left;
  background: red
}
.parent>div:nth-child(even){
  background-color: skyblue;
}
// html
<div class="parent">
  <div class="common"></div>
  <div class="common"></div>
  <div class="common"></div>
</div>
<div class="parent-brother"></div>

效果图如下：

从这里我们发现，div.parent元素并没有被子元素的所撑开。这里就要谈到所谓浮动，子元素相当于是漂浮起来的，飘在空中自然就没有高度，所以底下的元素自然就会占据parent的位置。
结合我在开发中遇到的，我认为浮动主要有下面有个副作用

• 1、 背景不能显示
  由于浮动产生，父元素的大小没有被撑开，会导致父元素的背景失效

• 2、边框不能撑开
  同样由于浮动产生，父元素的大小没有被撑开，会导致父元素的border失效

• 3、margin padding设置值不能正确显示
  由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

四、 清除浮动

既然上面说了这么多的问题是不是就意味着，我们就不应该用float呢？

首先在讲清除浮动的时候，我们要谈到一个属性：clear。
他的定义是：规定元素的哪一侧不允许其他浮动元素。，并且他有下面几个可选值：
1、 left 在左侧不允许浮动元素。
2、 right 在右侧不允许浮动元素。
3、 both 在左右两侧均不允许浮动元素。
4、 none 默认值。允许浮动元素出现在两侧。
5、 inherit 规定应该从父元素继承 clear 属性的值。

通过上面的属性说明 就应该知道clear属性肯定跟我们的清除浮动操作息息相关，我呢？就结合我在自己做项目时候亲身发现的几种清除浮动的方式。（不一定用到了clear哦！）

• 父元素添加overflow属性
  这个很简单，就是在父元素增加一个overflow属性

.parent{
  overflow: auto;
}

效果如下：

这里为什么会清除浮动呢？是由于overflow不是none属性下面触发了BFC导致清除了浮动。关于BFC 我在后面专门写文章来讲解，今天太晚了 就不展开了。但是很多情况下并不希望去设置overflow。此时就需要使用到以下几种方式了。

• 增加空子元素清除浮动
  来看下面一段代码:

// css
*{
  ... 和上面相同
}
.clear{
  clear: both;
}
// html
<div class="parent">
		...
<div class="clear"></div>
</div>
  <div class="parent-brother">
</div>

效果如下：

我们发现浮动在增加了上面的规则之后.parent会被子元素被撑开了。这样就达到了我们的目的了

• before伪元素
  来看下面一段代码：

.parent:after {
  content: "";
  display: block;
  height: 0;
  visibility: hidden; 
  clear: both;
}

效果如下：

同样用after伪元素也达到了上面的效果。

• before，after双伪元素

.parent:before,.parent:after{
  content: "";
  display: table;	
}
.parent:after{
  clear:both;
}

同样达到了我们想要的效果，这里实现的原理和第一条元素一样，display:table同样也触发了BFC，BFC不仅能清除浮动，并且能防止内外边距合并。我这里就多做赘述了。

说在最后

其实关于清除浮动这一块呢？最常规的手段有两种：

• BFC
• clear属性

关于清除浮动，我建议还是用clear属性，千万不要为了清除浮动而去建立一个BFC，因为我们在学习CSS基础的时候都知道CSS存在正交性，我们在使用BFC的同时可能对界面上的元素产生其他的副作用，这是值得我们去有选择性的使用的。

好了，没想到一个简单的东西随便一写就是一个晚上，自己觉得还没有将这部分完美的给剖析清楚。总之关于浮动这一块呢？其实我们要保持敬畏之心，但是不要敬而远之，而应该“因地适宜”，能用则用。 用好了，对你样式的提升还是比较巨大的。快12点了 睡觉了。

最后最后提到一句，欢迎大家点赞，关注我的个人博客，我会源源不断的输出高质量文章的。