前端三剑客之CSS---浮动的难点解析一

浮动难点解析

1.关于浮动元素的特点

所谓浮动，就是将垂直的文档流转变为水平的文档流。 浮动的初衷是用于文字环绕图片效果，现在却 “背道而驰” ，被用于布局。

浮动元素有如下几个重要特点：

1. 当一个元素设置浮动后，会脱离文档流，不再占据文档流的空间。
2. 浮动元素是在父元素的content-box(内容区）进行左右移动。
3. 浮动元素不会脱离父元素的content-box（内容区）。
4. 一个元素浮动后（脱离文档流）包括后面的定位时，就不满足水平公式了！
5. 在不给浮动元素设置宽度的情况下，它的宽度由其子元素决定！
6. 设置浮动的元素不满足水平公式，但是浮动内部的子元素仍然满足水平公式！

一个概念一个特点： 脱离文档流： 只要脱离文档流，它就不再占据空间 脱离文档流元素的特点： 脱离文档流的元素，不再区分行内元素和块级元素，它拥有类似行内块级元素特点。

2. 关于两个疑点

2.1 父元素设置浮动，并且没有指定宽度，此时宽度由子元素决定

一个情节：

<div class="father">
<div class="son">我是son</div>
</div>

此时如果样式为这样：

.father{
          
   
float:left;
}
.son{
          
   
font-size:20px;
padding-left:20px;
width:100%;
}

此时的father这个盒子实际宽度为多少？son这个盒子呢？

可以根据浮动特点得出： 因为father是浮动的，并且没没有显示设置宽度，那么其宽度由子盒子决定！ 此时子盒子是一个div那么它的width:100%怎么算？ 其实是这样的： 首先father的宽度由实际的son所占的可见框大小撑开,然后此时son的width:100%就是相对于父元素content-box的100%,因此最后： .father的宽度为40px,而.son的宽度为60px! 计算结果为（40px —>来自父亲 20px 来自padding-left） 由于.son仍然满足水平公式，因此它的margin-right为-20px!!!`

2.2 父元素有固定宽高，子元浮动问题

如果一个父元素设置了固定的宽高，此时它里面的子元素浮动的话，根据浮动特点可知：

1. 子元素在父元素的content-box中左右浮动
2. 如果是只有一个浮动的子元素的话，当这个子元素宽度超过了父元素宽度后，它只会水平溢出，不会脱离父元素的content-box区域。
3. 如果是有多个浮动的子元素的话，当它们的可见框大小总和超过父盒子的content-box后，超过的盒子就会被挤出来，到下一排去展示！