开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第15天，点击查看活动详情

文章概览

• 高度塌陷
• BFC

高度塌陷

 因为在浮动元素的布局中，子元素决定了父元素的高度，当子元素浮动后会脱离文档流，脱离文档流的子元素不会再撑起父元素的高度，这就导致了父元素高度的缺失。而父元素缺少高度，其余元素会自动上移补上，这会导致页面布局混乱。

开启元素BFC的方式

• 设置元素浮动
• 把元素设置为行内块元素
• 对元素的overflow属性进行设置，设置为overflow hidden

前两种并不推荐

BFC

 BFC（Block Fromatting Context）块级格式化环境，是一个CSS中的隐含属性，主要用于作为元素来开启一个BFC，所开启的BFC元素会成为一个独立的布局区域。

特点

• 开启BFC的元素不会被浮动元素覆盖。
• 开启了BFC的元素与其父元素的边框不会重叠。
• 开启了BFC的元素可以包含浮动的子元素。

clear的使用

 当不希望某个元素因为其他元素的浮动而受到影响改变位置时，可以使用clear属性来消除浮动元素所产生的影响。

clear可选值

• left：消除左边浮动元素对当前元素产生的影响。
• right：消除右边浮动元素对当前元素产生的影响。

补充：clearfix可以同时解决高度塌陷和外边框重叠的问题。

定位

 当编写一个网页时经常要使用到定位。

特点

• 定位是一种高级的布局方式。
• 定位可以把元素放到页面的任何位置。
• 定位可以使用position属性进行设置。

可选值

• static：默认值，元素静止。
• relative：开启元素的相对定位。
• absolute：绝对定位。
• fixed：固定定位。
• sicky：粘滞定位。