CSS学习笔记（浮动float）

太过爱你忘了你带给我的痛 2023-02-27 10:56 18阅读 0赞

**一、标准流（normal flow）**

标准流又称为文档流，普通流。

标准流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思。比如**块级元素会独占一行，行内元素会按顺序依次前后排列**；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。

**二、浮动（float）**

*  浮动最早是用来控制图片的，以便达到其他元素（特别是文字）实现 “环绕”图片的效果。
 *  现在我们主要使用浮动来`让块级元素并排显示`。

1、浮动是什么  
　元素的浮动是指设置了浮动属性的元素会脱**离标准普通流的控制**，移动到其父元素中**指定位置**的过程。

选择器 { float:属性值;} //left 、right 、none

2、浮动的特性

*  **浮动脱离标准流**
 *  **不占位置**
 *  **会影响标准流**
 *  **浮动只有左右浮动**
    
    a、浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70]  
    b、浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 1]  
    （1）一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。  
    （2）元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。  
    （3）一个元素内部所有元素都浮动了，如果父元素在没有设置高度的情况下它的高度会变成0，也就是说父元素的高度塌陷了。  
    （4）浮动的元素脱离不了父元素，可以影响父元素的高度，会跑到别的盒子中去。  
    （5） 如果一个盒子浮动，另一个不浮动或者定位（完全脱离标准文档流）可以让两个盒子重叠到一起  
    （6） 两个浮动的元素不能重叠到一起  
    （7） 浮动的元素都实现向上浮动到父盒子的边界

总结：  
（1） 浮动的元素盒子是漂浮起来的，漂浮在其他标准流盒子上面。  
（2） 浮动的盒子不占有位置，如果有没有浮动的元素为占有它原来的位置。  
（）首先浮动的盒子需要和标准流的父级搭配使用，浮动可以使元素显示模式体现为行内块特性。（对于行元素来说，可以直接设置宽高。）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70]: /images/20230209/72ede6f9940d4a399daefc50d6bd2dc9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 1]: /images/20230209/8acdb2149bac42b698fd2ac5cc6cf91a.png