从头开始复习css之浮动

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

一、 浮动最开始的作用

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

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

// css
img{
  float: left
}
// html
<p>刘亦菲...
<img src="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的位置。 结合我在开发中遇到的，我认为浮动主要有下面有个副作用

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

• 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属性肯定跟我们的清除浮动操作息息相关，我呢？就结合我在自己做项目时候亲身发现的几种清除浮动的方式。（不一定用到了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不仅能清除浮动，并且能防止内外边距合并。我这里就多做赘述了。

说在最后

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

转载于:https://juejin.im/post/5cdd491f6fb9a0323120b5e5