目录
6.使用 caption 和 thead, tbody, tfoot
一、浮动
在 CSS 中，浮动（float）是一个用于将元素从文档的常规流中移出的布局技术，最初用于实现文本环绕效果（如文本围绕图片）。浮动元素会向左或向右浮动，直到其容器的边界为止。虽然浮动最初主要用于图文排版，但随着时间的推移，浮动也被用作布局的一种手段。
然而，浮动布局虽然曾经广泛用于网页布局（特别是多列布局），但它有一些局限性和缺点，因此在现代 CSS 布局中，flexbox 和 grid 等新布局模型已逐渐取代了浮动。
1. 基本概念：float
float 属性允许元素向左或向右浮动，并将文档的其他内容环绕在它的周围。
float 的取值：
-
left：将元素向左浮动，元素会靠着父容器的左边缘浮动，其他内容将围绕在其右侧。 -
right：将元素向右浮动，元素会靠着父容器的右边缘浮动，其他内容将围绕在其左侧。 -
none：默认值，表示元素不会浮动，它会按照正常文档流排列。 -
inherit：继承父元素的浮动值。
2. 浮动的常见效果和行为
-
浮动元素的文档流
-
浮动的元素会脱离正常文档流，但它们仍然会占用空间。其他内容会围绕浮动元素排列，直到浮动元素的容器没有足够的空间为止。
-
如果多个元素浮动，它们会排列在同一行，直到容器的宽度被占满。如果容器的宽度不足，它们会换到下一行。
-
浮动的曲线：元素浮动了，先向上移动，直到贴靠到父元素的边界，接着，如果是左浮动，就向左移动，直到移动到父元素的左边界，如果是向右浮动，就向右移动，直接移动到父元素的右边界。
-
-
浮动元素的高度问题
-
当元素浮动时，它会脱离文档流，这可能导致父容器的高度“塌陷”。这是因为父容器没有包含浮动元素的实际高度，因此会显示为没有高度。这个问题通常需要通过清除浮动（clearfix）来解决。
-
-
文本环绕
-
浮动最常见的应用是让文本围绕图像排列。当图像浮动时，文本会环绕在图像的左侧或右侧。
-
3. 清除浮动（clearfix）
由于浮动元素脱离文档流，可能导致父容器的高度“塌陷”，这个问题可以通过**清除浮动（clearfix）**来解决。
解决方法：clearfix
-
使用
clear属性：-
通过
clear属性，指定元素在浮动元素之后显示，常用的值有：-
left：清除左侧浮动。 -
right：清除右侧浮动。 -
both：清除左右两侧浮动。
-
-
2、 清除浮动的常用技巧 - clearfix hack： 使用 :after 伪元素来清除浮动，这种方法通常应用于父容器，防止浮动元素导致父容器高度塌陷。
4. 浮动常见应用场景
-
图文混排：
-
常见应用：让文本围绕图像或其他浮动元素。
-
例子：文章中嵌入图像，图像浮动在文本的左侧或右侧。
-
-
多列布局：
-
通过浮动，可以创建简单的多列布局。
-
例如，将多个元素浮动到左侧或右侧，控制它们在容器中的排列。
-
3.导航条：
-
使用浮动来实现水平或垂直的导航条，尤其是当菜单项需要并排显示时。
6. 浮动的缺点和限制
-
复杂性：
-
浮动布局可能导致页面变得难以维护和调试，尤其是对于复杂的布局。
-
-
对父容器的影响：
-
浮动元素会脱离文档流，导致父容器无法正确计算高度。通过 clearfix 等技术解决，但这些技术有时可能会增加额外的复杂度。
-
-
不适合多维布局：
-
浮动非常适用于简单的布局（如文本环绕图像、两列布局），但对于更复杂的多维布局（如响应式设计、大型网站的布局）， Flexbox 和 Grid 布局更为推荐。
-
二、table布局
CSS Table 布局是一个基于表格的布局方法，它通过设置元素的 display 属性为 table，模拟 HTML 表格的行为来构建网页布局。CSS Table 布局被设计用来提供一种 类表格的布局方式，适用于需要行和列结构的网页布局。
虽然现代的布局方法（如 Flexbox 和 CSS Grid）更加灵活和强大，但在一些旧的布局场景中，CSS Table 布局仍然有它的适用场景。
学习这个的前提是你一定知道table是什么，不懂得可以去看看html怎么讲解table标签得
1. display: table 的基本概念
通过将某个元素的 display 属性设置为 table，它就会表现得像一个 HTML <table> 元素一样。可以与 display: table-row、display: table-cell 等配合使用，创建表格样式的布局。
最低0.47元/天 解锁文章
扫一扫
1397
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
