浮动布局：浮动布局的特点，缺陷以及如何清除浮动

末蓝、 2022-09-02 13:54 310阅读 0赞

### 文章目录 ###

*   *  浮动布局
     *   *  1. 认识浮动
         *  2. 浮动特点
         *  3. 浮动和inline-block 的区别
         *  4. 浮动的缺陷
         *  5. 清除浮动
         *   *  1. 父元素最后额外加一个元素（不推荐使用）
             *  2. 给浮动元素的父亲添加overflow属性方法（也不是很推荐）
             *  3. 给浮动元素的父元素使用CSS的:after伪元素（推荐）
             *  4. 什么时候清除浮动？

## 浮动布局 ##

### 1. 认识浮动 ###

*  谁能浮动：**任何元素都可以浮动**
 *  怎么浮动：float = left/right
 *  何时停止：**当浮动元素的外边缘(margin)碰到包含框或另一个浮动框的边框为止。**
    
     *  浮动元素浮动到父元素的padding为止，也就是从content开始
 *  浮动完类似于display: inline-block

### 2. 浮动特点 ###

*  浮动特点1 — 脱离标准流，不占位置
    
     *  脱离标准文档流，不占位置就说明后面的元素可以"无视"它，顶替它的位置
     *  但不是所有元素都能"无视"它，**行块元素(inline-block)和内联元素(inline)不会占掉它的位置**
     *  这也是为什么多个元素同时浮动，不会在视觉上堆叠成一个元素
 *  浮动特点2 — 浮动的元素一排显示，如果父亲装不下了，默认另起一行显示。**浮动的元素之间默认无缝隙。**
 *  浮动特点3 — 任何元素都可以添加浮动，无论它是块元素还是行内元素，浮动后可以直接设置宽高，默认类似于行内块特性，不需要display转换。

### 3. 浮动和inline-block 的区别 ###

*  inline-block元素之间会因为空格和换行而有间隙，浮动元素之间没有间隙
 *  inline-block方向是固定的，float可以设置方向

### 4. 浮动的缺陷 ###

由于浮动元素脱离文档流，父元素就不能检测到浮动元素的高度，就不能撑开父元素，会造成父元素的高度坍塌

### 5. 清除浮动 ###

#### 1. 父元素最后额外加一个元素（不推荐使用） ####

*  在最后一个加了浮动元素的末尾添加一个块级别的空标签。
 *  `<div style="clear:both;"></div>` — 这个空标签一定是块元素.
 *  缺点：破坏页面结构

#### 2. 给浮动元素的父亲添加overflow属性方法（也不是很推荐） ####

overflow: hidden/scroll/auto;

缺点：内容增多的时候导致内容被剪贴掉，无法显示需要溢出的内容。

#### 3. 给浮动元素的父元素使用CSS的:after伪元素（推荐） ####

*  伪元素用于创建一些不在文档树中的元素并为其添加样式。如 ::before ::after 双引号
 *  CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。如 :hover 单引号

.container::after{ 
         /* 使用伪元素必须添加content属性 */
         content: "";
         /* 因为伪元素是行内元素 所以需要转换成块元素 */
         /* clear 只适用于块级元素 */
         display: block;
         clear: both;
    }

#### 4. 什么时候清除浮动？ ####

1.父亲没有高度。

2.子盒子又浮动。

3.因为浮动影响了后面的布局。