文档流normal flow
- 网页是一个多层结构
- 通过CSS可以分别给每一层设置样式
- 作为用户只能看到最顶上一层
最底下一层称为文档流，文档流是网页的基础
- 我们所创建的元素默认都是在文档流中进行排列
- 元素主要有两个状态：在文档流/不在文档流
元素在文档流的特点
块元素：
1、独占一行，块元素会自上向下排列
2、块元素默认宽度是父元素的100%。前提都是没有设置宽高
3、高度默认被内容撑开。
内联元素：
1、在文档流只占自身的大小，会默认从左往右排列，如果一行容纳不下回换到下一行
2、在文档流中，高度宽度默认被内容撑开。
浮动
- 块元素在文档流里默认垂直排列。如果希望块元素在页面中水平排列，可以使块元素脱离文档流。
- 使用float来使元素浮动，从而脱离文档流。设置非none值，元素脱离文档流。
- 可选值
- none
- left/right
- 注意设置浮动后，水平布局等式不需要强制成立。会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动
- 浮动的特点
- 主要作用就是让页面中的元素可以水平排列，制作水平布局
- 1、浮动元素会完全脱离文档流，不再占据文档流位置
- 2、设置浮动后元素向父元素左侧或右侧移动
- 3、浮动元素默认不会从父元素中移出
- 4、浮动元素不会出超过前面其他浮动元素。浮动元素上面是一个没有浮动的块元素，则上不去，块元素独占一行
- 5、浮动元素不会超过它上边的兄弟元素，最多一边齐
- 6、想让某个元素上去，可通过调整结构顺序
- 7、浮动元素不会盖住文字，可用浮动设置文字环绕效果
- 8、浮动脱离文档流后，元素特点会发生改变
- 块元素脱离文档流
- 不再独占一行
- 宽度和高度被内容撑开
- 可以设置宽高
- 行内元素脱离文档流
- 变成块元素，特点和块元素一样
- 脱离文档流，不再区分行内和块
- 块元素脱离文档流
高度塌陷问题
- 在文档流中，父元素的高度默认被子元素撑开，也就是子元素有多高，父元素就有多高
- 当子元素设置浮动时，子元素会完全脱离文档流
- 此时会导致子元素无法撑起父元素的高度，父元素会塌陷，则父元素下的所有元素都会向上移动
解决方案1：
可以将父元素高度写死，避免塌陷，但一旦写死，父元素的高度将不能根据子元素动态调节，所以这种方案不建议使用
解决方法2：
BFC（Block Formatting Context）
- 块级格式化环境
- BFC是css中一个隐含的属性，可以为一个元素开启BFC，变成独立的布局区域
- 元素开启BFC后的特点：
- 不会被浮动元素所覆盖
- 子元素和父元素的外边距不会重叠
- 可以包含浮动的子元素，开启父元素的BFC
- 开启BFC的方法
使用这种方法会添加多余的结构，我们希望CSS的问题由CSS解决
通过after伪类向元素最后添加一个空白的块元素，就不会有多余结构
.clearfix:after{
/ clear: left; /
content: “”;
/ 伪元素添加的元素是行内元素 /
display: block；
clear: both;
}
垂直外边距重叠
例如给子元素设置margin-top，不会只移动子元素，而是将子元素和父元素一起移动
子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素
1、别用外边距，用内边距，会影响可见框高度
2、给父元素开启BFC
2、别让她们相邻， 用个空的table隔开，但结构多了内容
3、通过CSS添加一个空表格，。
box1:before{
content:””
display:table
}
同时解决高度塌陷和父子元素重叠
给要处理的元素加上clearfix类名
经过修改后的clearfix是一个多功能的
既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠
.clearfix:before,
.clearfix:after{
content: “”;
display: table;
clear: both;
}
clear清除浮动
若有收获，就点个赞吧
0 人点赞
