本文共 1938 字，大约阅读时间需要 6 分钟。
浮动（Float）是一种布局模式，可以让元素向左或向右浮动，浮动到包围元素的边上或上一个浮动元素的边上为止。浮动的元素不再占据页面空间，且层级高于普通元素。需要注意以下几点：
为了避免浮动元素对正常文档流布局造成影响，需要在父元素中使用清除浮动操作或设置父元素的溢出处理方式：
clear: both | left | right;。overflow: hidden 来清除浮动。清除浮动的作用有两个：
需要注意的几点：
CSS属性继承是指外层元素的样式会被内层元素继承。常见的文本属性包括 color、font-size、font-family 等。继承的规则有以下几点：
<body> 标签的属性会被所有子元素继承。CSS选择器的优先级决定了哪个样式会被最终应用。优先级规则如下：
<style>标签中的CSS） > ID选择器 > 类选择器 > 标签选择器。display 属性用于控制元素的显示方式，常见取值包括：
none：元素隐藏。block：元素以块元素形式显示。inline：元素以行内元素形式显示。inline-block：元素以行内块元素形式显示。块元素和行内元素的转换：
block 可以将行内元素转为块元素。inline 可以将块元素转为行内元素。overflow 属性用于控制内容溢出时的显示方式。常见取值包括：
visible：默认值，超出内容不显示。hidden：超出内容隐藏。scroll：显示滚动条。auto：自动显示滚动条或隐藏。cursor 属性用于设置光标类型。常见取值包括：
text：默认光标。help：帮助光标。pointer：手形光标。定位是布局中重要的概念，常见定位方式包括：
static：静态定位（默认状态，不进行定位）。fixed：固定定位，相对于浏览器窗口。relative：相对定位，相对于自身原位置。absolute：绝对定位，相对于最近的定位元素。定位的具体应用：
position: fixed：固定定位，不占空间，层级高于普通元素。position: relative：相对定位，依然占空间，层级高于普通元素。position: absolute：绝对定位，不占空间，层级高于普通元素。定位坐标：
left：左边定位。top：上边定位。right：右边定位。bottom：下边定位。盒子模型是理解布局的重要工具。盒子特征包括：
盒子总宽度计算公式： 总宽度 = 内容宽度 + 边框宽度×2 + 左填充×2 + 左外边距×2
上下两个块元素如果都指定了外边距，上下相邻的外边距会合并，取较大者。实现两块之间的距离为100px的方法包括：
<div> 中的一个指定 margin-bottom: 100px，另一个指定 margin-top: 0px。<div> 之间添加一个空 <div>，并指定其高度为100px。使用 <style> 标签引入CSS：
提示：同一个网页中可以多次使用 <style> 标签。
通过 <link> 标签引入外部CSS文件：
常用属性：
rel：引入文件类型，取值为 stylesheet。href：外部CSS文件地址。通过元素的 style 属性直接引入CSS：
文字
行内式样式优先级最高。
表格属性 border-collapse 用于合并表格单元格的边框：
border-collapse: collapse;
合并后的效果如下图所示：
以上是对CSS核心知识点的系统总结，希望能帮助你更好地理解CSS的使用。
转载地址：http://erefk.baihongyu.com/