Web前端学习整理(八)

float浮动

浮动式一种特殊的布局属性,用于控制元素在其容器的位置,通过设置元素的浮动属性,可以使其脱离文档流,向左或者向右设置浮动,从而使周围的内容环绕在其周围.

浮动样式最初是用来解决多列布局问题而引入的替代方法

---

普通文档流

浏览器在默认情况下规定一个块元素在父元素内部的排列规则

        -自上而下

        -自左向右

        -独占一行

float: left | right ;

通过设置浮动可以让元素从正常的文档流脱离,会根据浮动属性的设置而向左或者向右浮动到对应的方向,也就是它将不再占据正常的布局

---

浮动特点

-元素脱离文档流:不会受到父级元素其他的对应元素的干扰

-文字环绕:浮动元素不仅可以影响块级元素的布局,还能够影响行内元素(如文本).文本内容会环绕在浮动元素的周围,形成文字环绕的效果.

-浮动元素的位置将由浮

-浮动属性的设置决定

        -按照指定方向移动,但会受限于父级元素或者相邻元素

        -若上一个兄弟元素是普通文档流元素,那么这个元素就会相对垂直位置不变

        -有相邻浮动元素则会紧挨着 

        -支持margin但是不支持其auto

---

高度塌陷

当父级元素没有设置高度时,若容器内所有的子元素都设置为浮动,容器的高度无法自动撑开以适应子元素的高度,就会导致容器高度为0或者分厂小

解决方法:

子元素添加clear清除浮动

1.clear： left 清除左浮动 | right 清除右浮动 | both 清除现有的浮动,左右都可

2.父元素设置宽高属性

3.父元素利用伪类after 利用伪类元素相当于给父级添加了一个子属性,同时可以将样式公用,所有需要清楚浮动的父元素加上一个相同的class名称clear就行.

.container::after{ content: ""; display: block; clear:both; }

---

注意

元素设置浮动之后,不再支持margin:auto,只能支持其确切的值