分享兴趣，传播快乐，增长见闻，留下美好！

亲爱的您，这里是LearningYard新学苑。

今天小编为大家带来话说前端15-清除浮动

Share interests, spread happiness, increase knowledge, and leave a good legacy!

Dear you, this is The LearningYard Academy.

今天我们讲一下清除浮动的方法。大家都知道，当两个盒子在一起，一个浮动，一个不浮动，浮动的这个就会覆盖住没有浮动的这个，所以清除浮动就是我们的首要选择。

Today, let's talk about the method of clearing floating. As we all know, when two boxes are together, one is floating and the other is not, the floating one will cover the non-floating one, so clearing the floating is our first choice.

第一个方法，就是给浮动的元素在相同位置给一个相同大小的盒子，虽然浮动没有占据block等的位置，但是我们再给一个没有浮动的盒子，就相当于把这个位置给占领了，再有盒子出现时，就会自动往后进行布局，但是这个方法十分繁琐（相同位置）而且不利于代码的维护，所以不建议使用。

The first method is to give the floating element a box of the same size in the same position. Although the floating element does not occupy the position of block, we give another box without floating, which is equivalent to occupying this position. When another box appears, it will automatically be laid out later. However, this method is very cumbersome (same position) and not conducive to the maintenance of the code, so it is not recommended.

第二个方法，.父级添加overflow:hidden属性

第三个方法就是利用伪元素进行清除浮动，那我们讲一下什么是伪类元素和伪元素

伪类元素

::before------在当前元素前面插入一些元素-------激活使用content:"";

::after--------在当前元素后面插入一些内容--------激活使用content:"";

特点：属于行内元素

::first-line---在元素的第一行文字使用CSS样式

::first-letter---在元素的首字母或者首文字使用CSS样式

::selection-----当鼠标选择某些内容的时候出现的样式，（有的CSS样式不起作用，不支持）

伪类元素使用两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式。

The second method,. parent adds overflow:hidden attribute.

The third method is to use pseudo-elements to clear floating, so let's talk about what pseudo-class elements and pseudo-elements are.

Pseudo element

:: before------ insert some elements in front of the current element-activate the use of content: "";

:: after-insert some content after the current element-activate the use of content: "";

Characteristics: It belongs to the in-line element.

:: first-line-use CSS style in the first line of the element.

:: first-letter-use CSS style in the first letter or the first word of an element.

:: selection----- the style that appears when the mouse selects something, (some CSS styles don't work and are not supported)

Pseudo-elements use two colons (::) instead of one colon (:), which is a part of the requirements in CSS3 specification. The purpose is to distinguish pseudo-classes from pseudo-elements, and most browsers support these two representations.

注意！！：除了selection必须要用双冒号之外，其他的都可以用单冒号。

伪元素就是一个引号，同时也要激活，再在其中写上clear：both，就可以清除浮动了

Attention! ! : Except for double colons for selection, single colons can be used for everything else.

The pseudo-element is a quotation mark, and it should be activated at the same time. Then, write clear：both in it, and you can clear the floating.

今天的分享就到这里了。如果您对今天的文章有什么独特的想法，欢迎评论留言，让我们相约明天，祝您今天过得开心快乐！

That's it for today's sharing. If you have any unique ideas for today's article, please leave a comment, let us meet tomorrow, I wish you a happy day!

英文翻译：Google翻译

参考来源：百度、知乎

本文由LearningYard新学苑原创，如有侵权，请联系删除。

文案|尚永芳

排版|尚永芳

审核|李小雪