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

文章概览

• 浏览器的默认样式
• 浮动

浏览器的默认样式

 一般情况下浏览器会为元素设置一些默认的样式，默认样式会影响页面布局，因此编写页面时需要清除浏览器的默认样式。

重置样式表

 针对浏览器的默认样式，可以使用一些办法来进行重置。

• reset.css：该方法会直接清除浏览器的默认样式。
• normalize.css：该方式对默认样式进行了统一。

浮动

 通过设置浮动可以让一个元素向他的父元素的左侧或者右侧移动，需要使用float属性来进行设置元素的浮动。

可选值

• none：默认值，元素不浮动
• left：元素向左浮动
• right：元素向右浮动

设置了浮动的元素其水平布局的等式就不需要强制成立了。并且元素会从文档流中全部脱离，不再占用文档流的位置，因此元素下面的文档流中的元素就会向上移动补上来。

特点

• 浮动元素将完全脱离文档流，不占用文档流内的位置。
• 设置浮动后元素会向父元素左侧或者右侧移动。
• 浮动元素默认不脱离父元素。
• 浮动元素在移动时，并不会超过其旁边的其他浮动元素。
• 当浮动元素上面是一个没有浮动的块元素时，浮动元素将无法上移。
• 浮动元素不会超过其上位的其他元素，至多处于同样高度。
• 浮动元素不能覆盖文字，文字将会自动环绕浮动元素。

脱离文档流

 上面提到元素浮动后会脱离文档流，那么文档流有什么特点呢？

• 块元素不独占页面的行。
• 脱离文档后，块元素的宽度和高度默认都被内容撑开。
• 行内元素脱离文档后会变成块元素，特点与块元素相同。