【CSS】深入理解CSS浮动布局

逃离我推掉我的手 2022-04-18 04:55 231阅读 0赞

很多人对float属性理解的并不好，所以对float布局就有一点恐惧（比如我~），因为用float布局时会出现很多莫名其妙得问题，比如：  
1，父元素的高度怎么没啦？  
2， float元素怎么和其他元素重叠在一块了？

说到float，就必须先说另外一个概念： **文档流**

#### 文档流有两种： ####

一，内联元素的文档流**从左往右流动**，比如：

![在这里插入图片描述][20181108172022435.png]

可以看到hello水平排列的， 在到达箭头所指的位置时，换行了。为什么呢？ 因为剩下的位置不够一个hello的排列，根据内联元素从左往右流动的规则，hello文本会另起一行

二， 块级元素的文档流**从上往下流动**，比如：

效果如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70]

重点来了！！！

### 块级元素的高度由其文档流的高度决定 ###

再来看float布局，使用float的元素会脱离文档流，看一个例子：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 1]  
可以看到父元素没有被里面的元素撑起来，只有border  
根据：

### 块级元素的高度由其文档流的高度决定 ###

父元素高度塌陷不是很正常嘛？

如何解决父元素高度塌陷问题呢？

### 只要给浮动元素的爸爸加上一个clearfix： ###

.clearfix::after {
          content: '';
          display: block;
          clear: both;
        }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 2]

这样，就解决了浮动元素的爸爸高度塌陷问题。

那么如何用float实现两栏布局呢？

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 3]  
只需要让左边的元素左浮动，右边元素右浮动就ok啦

[20181108172022435.png]: /images/20220418/b9eef2627c2a44ecb91d9a08943cd932.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70]: /images/20220418/123ea8327df04dca93a49f98e4e0e44c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 1]: /images/20220418/b9a4dd86e79d4e53ae5ec19dd546ea10.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 2]: /images/20220418/d149228c8fdb4e21bdf84d22b2efe405.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 3]: /images/20220418/49c161e75c734f3b93c6c4ac3a06b250.png