CSS基础:浮动

[sxzy]

之前使用浮动和定位也有一段时间了，但是一直都觉得自己是处于一种理解不够深刻的状态，虽然说写了这篇文章也不见得有理解得算是很彻底了，不过也算是比之前有所进步吧。毕竟，当你回头看看自己过去那个蠢蠢的样子的时候，才会知道自己原来是有进步了。

CSS中的浮动和定位，这两个涉及到很多知识点，也是很容易混淆的。
最近看了CSS权威指南，再加上自己的一些理解，在这里做一个简单的总结。

CSS中的浮动:

• 元素会被隐式转换为行内块元素
• 浮动元素的浮动特点
• 浮动元素会使父元素高度坍塌
• 如何清除浮动
• 清除浮动对元素外边距的影响

CSS中的浮动

我这里不会去详细说到很多CSS中的基础原理，但是会对自己对一些知识点的提炼做一个总结，先说一下CSS中元素设置浮动之后会产生什么实际的效果吧。

元素会被隐式转换为行内块元素

当我们给一个块元素设置成浮动元素之后，浮动元素就不再占据一行，而是会转换为行内块元素，这一点和设置了position：absolute的效果是一样的。

<div class='left'>测试浮动元素</div>

.left {
  float: left;
  background: pink;
}

元素设置成浮动元素之后，会使周围元素环绕其排版。

理解这一点挺重要，浮动机制的设置一开始就是为了处理文字环绕图片的，所以可想而知，即使浮动元素脱离了文档流，但是在文档流里的其他元素不会将其当作完全不存在，百字不如一图，先看下面的结果图:

<div class='left'></div>
<div class='test'>我是来测试最终这个元素会怎么摆放的，最终怎么摆放就看你的了，如果是正确的显示方式，那么这个块元素里的文字就会环绕浮动元素而摆放</div>

.left {
  float: left;
  width: 100px;
  height: 100px;
  background: pink;
}
.test {
  background: yellow;
  height: 290px;
}

但是其实如果换作是绝对定位的元素，就不一样了。
结果是这样

可想而知，绝对定位的元素在文档中会被当作不存在的一样， 而浮动元素虽然也是脱离了文档流，但是周围的元素内容是会环绕着浮动元素的。

浮动元素的浮动特点:

同一行的浮动元素不会发生重叠的现象，也就是说，如果给一个元素设置左浮动，另外一个元素设置右浮动，如果两个元素的宽度之和超过了包含块的总宽度，第二个元素就会往下移去浮动元素。

同理，两个元素都左浮动时，如果总和超过一行的总宽度，元素也会往下挤。

浮动元素会使父元素高度坍塌

可以通过设置清除浮动
关于这个的设置已经有很多文章都提到了，这里就不再详细展开了。主要都是围绕父元素设置成BFC，或者添加了清除浮动的伪元素。

清除浮动的例子讲解

如何清除浮动

clear:both
clear:right
clear:left
clear:none

当应用于非浮动块时，它将非浮动块的边框边界移动到所有相关浮动元素外边界的下方。这个行为作用时会导致margin collapsing不起作用。

当应用于浮动元素时，它将元素的外边界移动到所有相关的浮动元素外边界的下方。这会影响后面浮动元素的布局，后面的浮动元素的位置无法高于它之前的元素。

要被清除的相关浮动元素指 在相同块级格式化上下文中的前置浮动。

最后一句话的意思就是，要被清除的浮动元素是前置浮动元素才能生效。
像下面这样设置，对第一个元素设置清除右边浮动不能生效，这么理解，清除浮动都是通过将元素自身向下移动来达到清除浮动的效果，而如果移动前置元素自身来达到清除浮动显然不合理。

当然，清除浮动之后，也会对后面的元素产生影响，像下面的例子，右边的浮动元素也会跟着向下移动，因为后面的浮动元素不能高于它之前的元素，但是不会影响后面的非浮动元素.可以看一下下面的例子。

  <div><div class='left'>第一个元素：我左浮动了</div><div class='left'>第二个元素：我左浮动了</div><div class='right'>我右浮动了</div></div>
    <div class='test'>我是来测试最终这个元素会怎么摆放的，最终怎么摆放就看你的了，如果是正确的显示方式，那么这个块元素里的文字就会环绕浮动元素而摆放</div>
.left {
    float: left;
    width: 400px;
    height: 200px;
    clear: right;
    background: yellow;
}
.right {
    float: right;
    height: 210px;
    background: pink;
    width: 949px;
}
.test {
    background:green;
}

清除浮动对元素外边距的影响

给清除浮动元素设置清除浮动之后，并不会影响该清除浮动元素的外边距显示，但是因为清除浮动元素是在清除浮动元素外边距之上增加一个清除区域来清除浮动的。

看一下下面的例子吧。

.left {
    float: left;
    width: 400px;
    height: 200px;
    background: yellow;
}
.test {
    clear: left;
    background: pink;
    margin: 30px 0px;
    height: 90px;
}

想要浮动元素与清除浮动的元素(设置了clear的非浮动元素)之间有margin值，最直接的解决方法就是给浮动元素设置margin-bottom。
这里之所以强调是非浮动元素，是因为浮动元素本身不会有这个问题，应该是设置了浮动的元素本身就形成了一个BFC格式。

呼，终于搞定了，感觉很多点都没有说得很详细，但是算是自己对自己最近总结的知识点的一个总结吧。