浮动|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第22天

浮动

关于浮动，有很多要注意的细节，总结如下

应用场景

0. 文字环绕
1. 横向排列

浮动的基本特点

float：left right 默认值为none

0. 当一个元素浮动后，一定是块盒。也就是说，浮动的元素会被转换为display：block；
1. 浮动元素的包含块，和常规流一样，为父元素的内容盒。

盒子尺寸

0. 浮动的盒子的宽度为auto时，内容决定盒子宽度的大小，不会自动吸收
1. 高度为auto时，和常规流一样，都是取决于内容。
2. margin为auto时，就是设置margin为0；
3. 边框、内边距、百分比设置与常规流一样

盒子排列

0. 左浮动的盒子，靠上靠左排列；右浮动的盒子，靠上靠右排列
1. 浮动盒子排列的时候会避开常规流盒子，常规流盒子会忽略浮动盒子。
2. 行盒排列时，会避开浮动盒子，就是文字环绕

如果文字不是在行盒当中，浏览器会自动生成一个行盒包含文字，也就是说，文字一定会在行盒里面。

高度坍塌

常规流盒子包含浮动流盒子的时候，忽略浮动流盒子，导致包含不了，高度不会被内容撑开。要清除浮动。

clear：

1. left：清除左浮动，元素要在浮动元素的左下方
2. right：清除右浮动，元素要在浮动元素的右下方
3. both：清除左右浮动，元素要在浮动元素的下方

直接对要清除浮动的元素的伪元素进行清除 ，如： .containerfix::after{ content:""; display:block; clear:both; } 把这个名字用到有浮动的父元素的类名之中就行。 有浮动的都在父元素加上这个，防止高度坍塌。

做页面的时候，样式一样的一般放在一个块盒里面，方便总体设置样式。大体样式一样的时候，设置同样的类名。

要设置图片的宽高，避免图片的大小不同导致排版乱。

一个新的伪类选择器：:nth-child(6n)表示选中的是第6、12……的元素。

::first-letter{ 选择的是第一个文字 }