CSS中的浮动问题详解

男娘i 2022-03-02 09:54 289阅读 0赞

CSS中的浮动问题所带来的“父级坍塌”等怪异的现象也是一个让人费神的东西，今天笔者就CSS中的浮动问题进行详细的阐释，以及如何防止意外情况的发生。

## 一、浮动问题的产生 ##

首先我们来看一个例子：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70]  
在浏览器中的效果是这样的：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 1]  
粉色部分右边都是空白既浪费空间又不美观，我们对它进行浮动。给`.box`加上`float:left`属性，看一下这时候的效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 2]  
会发现此时绿色部分跑到粉色部分下面去了，这是因为粉色部分“浮动”起来了，这叫做“脱离文档流”。而绿色部分占据了粉色部分的位置，因为粉色部分此时与绿色部分不在一个层级上，这时候绿色部分“忽视”粉色盒子的存在，绿色部分“占据文档流”。那么如何处理呢？我们可以让绿色盒子也浮动起来，让它们处在同一层级上。给`.box2`也添加`float:left`属性。看一下这时候的效果。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 3]  
如果我们此时增加第三个盒子会怎样呢？  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 4]  
发现蓝色盒子此时占据了原来粉色和绿色盒子的位置。如何我们既想要粉色盒子和绿色盒子并列，又不希望其他盒子占据它们的位置该如何呢？这时候就需要“清除浮动”。

## 二、清除浮动 ##

清除浮动有两种常用的方法：

1、紧接着浮动盒子的下面增加一个空标签，设置其属性为：`clear:both`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 5]  
看一下此时的效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 6]  
2、通过伪元素添加标签：  
首先要给粉色盒子和蓝色盒子添加一个父级标签，然后对其父级标签添加伪元素：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][20190320110858661.png]  
看一下现在的效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 8]  
这样我们就解决了浮动问题。其实解决浮动问题的方法不止这两种，不过这两种方式比较简单也比较直观，相比之下，第二种添加伪元素的方式更常用。

最后，我们来看一个由于浮动带来的“父级坍塌”现象：  
（1）浮动之前  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 9]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 10]  
（2）浮动之后  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 11]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 12]  
发现父级元素只有一条“红线”显示，这就是“父级坍塌”现象。当然这个问题就可以用我们上面所讲的两种方法完美的解决。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70]: /images/20220302/4a2420568ae94e019d8495c6b3f38cc2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 1]: /images/20220302/e96febce29554939b0b48c482006e0b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 2]: /images/20220302/c76f4307ea844917b9daf2b7d037c014.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 3]: /images/20220302/224072047751465f8ce67d61841b8192.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 4]: /images/20220302/8c5bf2ec54ff4df79fcf7010b180e932.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 5]: /images/20220302/8c0a4ab794854e3ab28e151e1e772005.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 6]: /images/20220302/ddf4ecd235cb46ee946d41b1d5106230.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 7]: /images/20220302/f2a69397330c4cc2960421f3981aff78.png
[20190320110858661.png]: /images/20220302/47fb39cf5e974162971a0dcca35df963.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 8]: /images/20220302/5a54e5e72da840f89ee218e26b3dcda2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 9]: /images/20220302/df681f66ec63429788001bc4afe8e525.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 10]: /images/20220302/edd2e1aaed1140ab8acb3b6d5c7f2736.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 11]: /images/20220302/7764477dcd5744cf954ad8f7c9f20a31.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 12]: /images/20220302/66c6d6fdff4f4b95bb938d04561c455c.png