css浮动布局总结

淡淡的烟草味﹌ 2021-09-29 16:42 403阅读 0赞

## 什么是浮动布局： ##

**浮动布局：默认流动布局有不足，让男标签可以并排显示**  
如果一个元素浮动了，就相当于这个元素出国，就会产生影响：  
影响1：元素出国了，父元素里面就相当于没有内容（前提父元素没有设置高度，高度是内容给撑起来的），它的高度就变成0了，也就父元素高度塌陷了。元素浮动会造成父元素的高度塌陷。  
清楚影响：overflow:hidden; overflow本意就是处理溢出，我们可以使用overflow的这个小偏方，消除父元素的塌陷。  
如果一个元素浮动了，那么这个元素内部还是按流式布局进行布局（内部也是一个标准文档流）。

格式：float: left / right / none left左浮动，right右浮动，none默认的不浮动

浮动特点：  
特点：  
0，浮动初衷是为了实现字围（新闻），后面才发现，浮动可以让多个男标签并排显示。  
1，在一个父元素内部，如果一个元素浮动了，那么它就脱离了标准文档流，后面的元素就让向上排  
2，浮动并没有完全地脱离了标准文档流（破坏性—>flex），如果后面的元素内部有文字，这些文字会环绕在浮动元素的周伟，产生字围。  
3，如果多个元素浮动了，那么这们就会并排显示，如果都是同一个方向的浮动，它们会紧紧地贴在一起。  
**4，如果一个元素浮动了，先向上移动，直到贴靠到父元素的边界，接着，如果是左浮动，就向左移动，直到移动到父元素的左边界，如果是向右浮动，就向右移动，直接移动到父元素的右边界。**  
**5，如果一个元素没有设置高度，它的高度是靠里面的内容撑起来的。如果父元素内部元素都浮动了，那么会造成父元素的高度塌陷。**  
**6，如果元素浮动了，那么它会造成影响：造成父元素高度塌陷。解决:显示加高度（加高法） 小偏方（overflow:hidden）**  
**7，如果元素浮动了，它也会造成对后面的兄弟元素影响。解决：clear:both/left/right**  
8，应用：实现左右布局 小导航 多个规则盒子水平排列（行内块）  
9，当一个浮动起来的男盒子，没有设置width，那么这个盒子的宽高会尽可能小，小到包裹住它里面的内容，这叫包裹性，  
10，如果一个元素浮动了，它会悄悄地做一个变性手术。如果一个女盒子浮动了，那么就可以设置宽高了，相当于把它变成男标签。  
11，如果父元素也浮动了，那么就不会出现高度塌陷了。  
12，如果有左浮动，又有右浮动，那么你需要把右浮动的元素写在左左浮动的前面 ??  
13，写三个盒子，利用27种情况去讨论最后的显示。  
14，浮动元素会从标准文档流中半脱离出来。证明：字围  
15，一个元素浮动了，那么它也是受父元素的控制。当父元素宽度变小时，装不下所有的子元素时，后面的子元素有贴靠性。当父元素小到极限时，里面的浮动的子元素宽度是不会改变的。

**清除浮动的解决办法：**

*  1，对父元素造成的影响  
    父元素高度塌陷  
    解决：显示加高度（加高法）小偏方（overflow:hidden） clear:both
    
     *  加高法：简单 基本不用 大部分情况情况下，父元素的高度是需要子元素撑起来
     *  overflow:hidden : 简单 使用了overflow:hidden 父元素的高度会随着子元素的高度变化而变化 overflow:hidden本职工作是用来处理溢出 在使用过程中，需要注意子元素如果想要超出父元素高度，此时overflow:hidden就不适合了。
     *  clear:both 在所有子元素后面加一个空的div 在这个div上面加clear:both —> 内墙法  
        优点：clear:both专业清除浮动的 缺点：多写一个代码
 *  2，对后面兄弟元素造成的影响  
    兄弟元素会向上移动  
    解决：在受影响的元素上面的加 clear:both
 *  3.项目中最常用清除浮动的方法： 利用伪元素 after  
    说白了，就是写一个清除浮动的类，如下：  
    .clear:after\{content=""; display:block; clear:both; height:0; overflow:hidden;\}