一、CSS 浮动 浮动产生的问题（为什么要清浮动） 清浮动的方法 什么是伪元素

Css浮动   概述

网页中有很多布局效果，标准流没有办法完成，使用可以利用浮动改变元素默认的排列方式，

## 浮动的概念

浮动可以使元素【脱离文档流】，【按照指定方向排列】，直到遇到父元素的边界或另一个浮动元素【停止】

## 标准流（普通文档流）

文档中可以显示的对象在排列时所占的位置，实际上就是一个网页内标签正常从上到下，从左到右的排列，比如，块级标签会独占一行，行级标签会在一行显示

浮动

        float: left; 左浮动，标签向左浮动

        float: right;右浮动，标签向右浮动

        float: none;不浮动，默认值，并且会显示在其文本中出现的位置

 浮动特性：

        1.浮动元素脱离正常标准流不脱离文本流

        2.浮动元素不占位，父级盒高度为零

        3.如果浮动元素的宽度之和大于父元素，则浮动盒会被挤到下一行

        4.使行级标签支持宽高

        5.提升层级

注意：元素浮动后类似于行内块标签（没有行内块的间隙问题），在一行内展示，可以设置宽高。

```

## 浮动产生的问题（为什么要清浮动）

- 子元素浮动会脱离正常标准流，会导致父元素高度塌陷 （背景、边框无法正常显示）

- 影响之后元素的布局

## 清浮动的方法

`清除浮动的方法

        1.给浮动元素的父级盒子设置一个固定的高度

          优缺点：不够灵活，适用于高度固定的布局中

        2.为浮动元素的父级盒子设置浮动

          优缺点：会产生新的浮动问题

        3.为浮动元素的父盒子添加overflow属性；overflow的属性值可以为hidden,scroll,auto

          优缺点：可能会隐藏内容或触发不需要的滚动条；代码简洁

        4.在浮动元素之后，与浮动元素呈并列关系的位置，加一个不浮动块元素（空的div标签（div本身不浮动，没有尺寸）），在空的div标签上加上属性：clear：both;

          优缺点：代码冗余，通俗易懂，书写方便

            clear: left; 清除左侧浮动带来的影响

            clear: right;清除右侧浮动带来的影响

            clear: both;清除两侧浮动带来的影响

        5.推荐方式：用伪元素清除浮动，给浮动元素的父级盒加类名.clearfix，并在.clearfix中添加样式：

       

           .clearfix::after{

                 content:'';

                 display:block;

                 clear:both;

            }

            优缺点：不会再结构上产生冗余代码，可以重复使用，结构语义化正确

```

1）什么是伪元素

用css语言创造出来的标签

伪元素创造的标签是行级标签

2）如何创建伪元素

- element::before{ content:"伪元素的文本内容"; 属性名: 属性值; }

  element元素内部，内容之前，添加“伪元素的文本内容”

- element::after{ content:"伪元素的文本内容"; 属性名: 属性值; }

  element元素内部，内容之后，添加“伪元素