CSS浮动

1、语法

1.1 float: none(默认值,不浮动,按标准文档流排列) 或者 left(左浮) 或者 right(右浮)

2、左浮动和右浮动区别

2.1 左浮动是把元素移动左边,直到遇到上一个浮动元素或者父元素的边界停止

2.2 右浮动是把元素移动右边,直到遇到上一个浮动元素或者父元素的边界停止

3、特点

3.1 即使元素浮动以后, 还是父元素的内容, 会受到padding和obrder的约束 不会跑出父元素之外

3.2 浮动以后的元素,会脱离标准文档流的约束(简称脱标), 不占位置,标准文档流的约束就是块级元素从上到下排列, 行内或者行内块元素从左到右排列

3.3 父容器的宽度不够的时候, 浮动元素只能下一行

3.4 文字是无法跑到浮动元素的上面,  因为浮动最初设计出来是实现图文混排

3.5 前一个元素不浮动,是标准流文档流的元素, 如果前一个元素是行内或者行内块元素, 那么下一个浮动元素, 会跟前一个元素在同一行(span是行内元素, 行内元素不独占一行)

3.6  前一个元素不浮动,是标准流文档流的元素, 如果前一个元素是块级元素, 那么下一个浮动元素, 会在下一行进行浮动(p是块级元素, 块级元素独占一行)

3.7 浮动以后的元素,脱离标准文档流,即使原来行内元素, 也可以设置宽度和高度生效(行内元素无法宽度高度,设置了也无效)

4、版心

4.1 因为版心布局页面中用的非常多,所以可以专门定义一个版心类

4.2 版心类代码,仅需要设置宽度和margin左右auto即可

4.3 版心布局是宽度超过页面的一半,元素需要水平居中在页面的中间

4.4 多类名选择器 同一个标签的class属性值可以设置多个类名,类名之间使用空格隔开

4.5 通栏布局的宽度是百分比, 高度一般不超过页面的一半

4.6 通栏布局一半会配合版心布局使用, 外面通栏布局,内部版心布局

4.7 浮动我们也会经常使用, 所以也可以跟版心类一样,定义两个浮动类

4.8 分栏布局,就是一个大盒子中,里面会有不同的栏目, 多个栏目排成一排,核心是使用浮动

5、相邻(兄弟关系)块元素垂直外边距的合并

5.1 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。

5.2 解决方式: 不要同时设置两个盒子 只需要设置其中一个即可

6、嵌套(父子关系)块元素垂直外边距的合并

6.1 对于两个嵌套关系的块元素，如果父元素没有上内填充及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

6.2 解决方法:

6.2.1 不给子元素设置margin-top, 给父元素设置padding-top, 注意高度要减去多余的

6.2.2 给父元素设置1px上边框或者内填充即可

6.2.3 给父元素设置overflow:hidden

7、嵌套块(父子关系)元素给"子元素设置上外边距"出现整体塌陷(掉下来)现象

7.1 解决方法:

7.1.1 可以为父元素定义1px的上边框或上内填充

7.1.2 可以为父元素添加overflow:hidden

7.1.3 也可以给父元素设置等价的padding-top,记得减去对应的高度,也可以解决

8、清除浮动

8.1 若父元素没有设置高度,父元素的高度是由子元素撑开得到的

8.2 为什么要清除浮动,因为浮动元素会脱标,不占位置,不占位置,不占位置

比如子元素都浮动,容易导致父元素高度为0, 所以我们需要清除浮动带来的影响

8.3 清除浮动方法

8.3.1 给父元素设置一个固定高度, 该方式不推荐 缺点该方式需要手动计算父元素的高度

8.3.2 给父元素设置overflow:hidden;溢出隐藏, 缺点是超出父元素之外的内容会被隐藏

8.3.3 额外标签法, 在"最后一个浮动元素的后面",添加一个"空的块级元素",并且给这个块级元素设置clear:both;属性, clear是专门用于清除浮动的属性, clear属性的取值可以写left, right和both clear:left清除左浮动 clear:right清除右浮动 clear:both;清除左右浮动, 缺点, 会有一个多余的块级元素

8.3.4 ::after伪元素清除法, 它是额外标签法的升级版 定义一个清除浮动类, 并且在父元素上面添加这个类名

.clearfix1::after {

    /* content属性不能省略 */

     content: "";

   /* 清除左右浮动 */

     clear: both;

   /* 转成块级元素 */

    display: block;

}

8.3.5 双伪元素清除浮动法  定义清除浮动类 并且在父元素上面添加这个类名