浮动

文本主要内容

• 标准文档流
  • 标准文档流的特性
  • 行内元素和块级元素
  • 行内元素和块级元素的相互转换
• 浮动的性质
• 浮动的清除
• 浏览器的兼容性问题
• 浮动中margin相关
• 关于margin的IE6兼容问题

标准文档流

宏观地讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个"流"，必须从上而下，像"织毛衣"。而设计软件，想往哪里画个东西，都能画。

标准文档流的特性

(1) 空白折叠现象：

无论多少个空格、换行、tab，都会折叠为一个空格。

比如，如果我们想让img标签之间有空隙，必须用css来设置。

(2) 高矮不齐，底边对齐：

举例如下：

<div>
    <img src="images/1.jpg" alt="">
    <img src="images/2.jpg" alt="" height="50px">
    <img src="images/3.jpg" alt="" height="100px">
</div>

上面的例子中，三张图片的底边是对齐的。

(3) 自动换行，一行写不满，换行写。

行内元素和块级元素

在标准流中，元素分为行内元素和块级元素。

行内元素

行内元素的特点：

• 与其他行内元素并排
• 不能设置宽高
• 默认宽度就是文字的宽度

常见的行内元素有：<a>、<span>、<img>、<input>、<button>等。

块级元素

块级元素的特点：

• 霸占一行，不能与其他任何元素并列
• 能接受宽高
• 如果不设置宽度，那么宽度默认是父级的100%

常见的块级元素有：<div>、<p>、<h1>~<h6>、<ul>、<li>等。

行内元素和块级元素的相互转换

通过CSS的display属性可以将行内元素和块级元素进行相互转换。

• display: inline; 将元素转换为行内元素
• display: block; 将元素转换为块级元素
• display: inline-block; 将元素转换为行内块元素（既可以设置宽高，又可以与其他元素并排）

浮动的性质

浮动是CSS中一种布局方式，通过float属性来实现。

浮动的特性

1. 浮动的元素脱离标准流
2. 浮动的元素互相贴靠
3. 浮动的元素有"字围"效果
4. 收缩：一个浮动的元素，如果没有设置宽度，那么将自动收缩为内容的宽度

浮动的使用

.box {
    float: left; /* 左浮动 */
}

.box2 {
    float: right; /* 右浮动 */
}

浮动的应用场景

1. 文字环绕图片
2. 横向排列的盒子
3. 网页布局

浮动的清除

当我们使用浮动后，可能会带来一些问题，比如父元素高度塌陷。这时候我们需要清除浮动。

清除浮动的方法

1. 给父元素设置高度

这种方法简单，但是不灵活，不推荐使用。

.parent {
    height: 200px;
}

2. 给父元素设置overflow:hidden

这种方法简单，但是可能会导致内容被隐藏。

.parent {
    overflow: hidden;
}

3. 使用clear:both

在浮动元素的后面添加一个空的div，设置clear:both。

<div class="parent">
    <div class="box1"></div>
    <div class="box2"></div>
    <div style="clear:both;"></div>
</div>

4. 使用伪元素清除浮动（推荐）

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

.clearfix {
    *zoom: 1; /* 兼容IE6、7 */
}

<div class="parent clearfix">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

浏览器的兼容性问题

双边距bug

在IE6中，如果一个元素是左浮动，并且设置了左边距，那么左边距会翻倍。

解决方法：

.box {
    float: left;
    margin-left: 10px;
    _margin-left: 5px; /* 兼容IE6 */
}

3像素bug

在IE6、7中，如果一个元素浮动，另一个元素没有浮动，那么这两个元素之间会有3像素的间距。

解决方法：

.box {
    float: left;
}

.text {
    float: left; /* 让文字也浮动 */
}

浮动中margin相关

margin塌陷

当两个垂直方向的margin相遇时，它们会合并成一个margin，值等于两个margin中的较大值。

<div class="box1"></div>
<div class="box2"></div>

.box1 {
    margin-bottom: 20px;
}
.box2 {
    margin-top: 30px;
}

在上面的例子中，box1和box2之间的实际距离是30px，而不是50px。

margin合并

当父元素没有设置border、padding、overflow:hidden等属性时，子元素的margin-top会传递给父元素，导致父元素一起向下移动。

<div class="parent">
    <div class="child"></div>
</div>

.parent {
    width: 200px;
    height: 200px;
    background-color: #f00;
}
.child {
    width: 100px;
    height: 100px;
    background-color: #0f0;
    margin-top: 50px;
}

在上面的例子中，child元素会有50px的上边距，但是这个边距会传递给parent元素，导致parent元素也向下移动50px。

解决方法：

1. 给父元素设置border
2. 给父元素设置padding
3. 给父元素设置overflow:hidden
4. 给父元素设置浮动
5. 给父元素设置定位

关于margin的IE6兼容问题

在IE6中，如果一个元素的父元素有边框，那么这个元素的margin值会加倍。

解决方法：

.parent {
    border: 1px solid #000;
}
.child {
    margin-top: 10px;
    _margin-top: 5px; /* 兼容IE6 */
}

总结

浮动是CSS布局中非常重要的一种方式，它可以让元素脱离标准流，实现多种布局效果。但是浮动也会带来一些问题，比如父元素高度塌陷，这时候我们需要清除浮动。

在实际开发中，我们通常会使用浮动来实现横向排列的盒子，或者实现文字环绕图片的效果。但是随着CSS3的发展，我们现在有了更多的布局方式，比如Flexbox和Grid，它们可以更方便地实现复杂的布局。

不过，浮动仍然是CSS布局的基础知识，掌握它对于理解CSS布局至关重要。