css基础4-浮动布局

CSS基础-浮动布局 CSS 布局浮动目录是 CSS 中的一种基本布局方式，通过浮动可以实现网页的水平布局和垂直布局。浮动主要用于网页布局，让垂直布局的盒子变成水平布局。 一、结构伪类选择器 结构伪类选择器是一种特殊的选择器，用于根据元素在 HTML 中的结构关系来选择元素。结构伪类选择器的优点是减少了对 HTML 中类的依赖，有利于保持代码整洁。 结构伪类选择器的基本语法是：`:nth-child(n)`，其中 `n` 是一个数字，表示选择第 `n` 个子元素。 例如，`:nth-child(2)` 将选择第二个子元素。 结构伪类选择器的注意点： * `n` 可以是 0、1、2、3、4、5、6 等数字。 * 通过 `n` 可以组成常见的公式。 结构伪类选择器的拓展： * `:nth-of-type` 选择器是根据元素的类型来选择子元素。 * `:nth-child` 选择器是直接在所有孩子中数个数。 * `:nth-of-type` 选择器是先通过该类型找到符合的一堆子元素，然后在这一堆子元素中数个数。 二、伪元素 伪元素是 CSS 模拟出的标签效果，用于网页中的非主体内容。伪元素的种类有很多，如 `::before`、`::after` 等。 伪元素的必加属性是 `content` 属性，否则伪元素将不生效。伪元素默认是行内元素。 伪元素的目标是能够使用伪元素在网页中创建内容。 三、标准流 标准流是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素。标准流的排版规则有两种： * 块级元素：从上往下，垂直布局，独占一行。 * 行内元素或行内块元素：从左往右，水平布局，空间不够自动折行。 四、浮动 浮动是 CSS 中的一种布局方式，用于实现网页的水平布局和垂直布局。浮动的作用是让垂直布局的盒子变成水平布局，如：一个在左，一个在右。 浮动的代码是通过 `float` 属性来实现的，例如 `float: left` 或 `float: right`。 浮动的特点是可以实现水平布局和垂直布局，并且可以与其他布局方式结合使用。 五、清除浮动 清除浮动是指在浮动元素后面添加一个清除浮动的元素，以避免浮动元素对其他元素的影响。清除浮动的方法有多种，如 `clear: both`、`overflow: hidden` 等。 小结： 浮动是 CSS 中的一种基本布局方式，用于实现网页的水平布局和垂直布局。浮动的作用是让垂直布局的盒子变成水平布局，并且可以与其他布局方式结合使用。