CSS（四）display和float
display
display 属性用于控制元素的显示类型，用的 display 值包括：
block：块级元素- 使元素成为块级元素，占据一整行，前后有换行
- 宽度默认为父容器的 100%，可以设置宽高，支持
margin、padding、border等属性 - 常见的块级元素：
<div>,<h1> - <h6>,<p>,<form>,<section>,<article>等
-
inline：行内元素- 行内元素不会占据一整行，它只会占据内容所需的空间，元素之间没有换行。
- 行内元素的特点是：不支持设置宽度和高度，不能使用
margin-top和margin-bottom。 - 常见的行内元素：
<span>,<a>,<strong>,<em>等
-
inline-block：行内块级元素- 是
block和inline的结合体，它不换行，但可以设置宽度和高度，支持margin、padding等。 - 常见用法：常用来让导航条的列表项水平排列，或者需要在一行中放置多个块元素
- 是
例如：
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin-right: 10px;
}
以上代码会让导航栏中的 li 元素排成一行
Float
浮动是将元素从正常的文档流中脱离出来，其他元素（比如文本）将围绕其周围排布，通常用于实现网页的布局效果
float 的属性包括：
left：元素浮动到容器的左侧，其他元素会围绕在其右侧right：元素浮动到容器的右侧，其他元素会围绕在其左侧none：默认值，元素不会浮动，保持在正常文档流中
例如：
img {
float: left; /* 将图片浮动到左侧 */
margin-right: 10px; /* 给图片右侧添加间距 */
}
这段代码让图片浮动到左侧，文字将会围绕着图片排布
父级边框塌陷问题
当使用 float 来布局元素时，浮动的元素脱离了正常的文档流，其他元素会忽略浮动元素的存在，直接排布在它们的旁边
假设有一个浮动的div元素：
<div class="container">
<div class="float-item">浮动元素</div>
<div class="normal-item">普通元素</div>
</div>
其对应的css为：
.container {
border: 1px solid #000;
}
.float-item {
float: left;
width: 50%;
background-color: #f0f0f0;
}
.normal-item {
background-color: #ccc;
}
在这个例子中，float-item 会浮动到容器的左边，而 normal-item 会在其旁边显示。但是，.container 元素不会自动扩展以包含 .float-item，因为 .float-item 脱离了正常的文档流。结果，.container 元素的高度可能为 0，导致外观上看不到边框，这就是父级边框塌陷问题
增加父级元素高度（不建议）
为了解决父级边框塌陷问题，我们可以选择直接为父级元素设置足够的高度，使浮动的子元素能够包含在内。例如直接将父容器设置为height:300px; 但是，这种方法无法动态适应子元素的高度，如果浮动的子元素内容发生变化，则需要手动调整父元素的高度。
使用空div标签
在父容器的最后插入一个空的清除浮动元素 div，并通过 CSS 设置其 clear: both; 来清除浮动。这样可以确保父容器的高度扩展到浮动元素的高度。
clear：清除浮动，可以让块既有浮动的效果，也排成标准文档流的样式
- right：右侧不允许有浮动
- left：左侧不允许有浮动
- both：两侧都不允许有浮动
例如：
<div id="father">
<div class="child">浮动元素1</div>
<div class="child">浮动元素2</div>
<div class="clear"></div> <!-- 清除浮动 -->
</div>
.clear {
clear: both;
margin: 0;
padding: 0;
}
这种方法通过插入一个额外的空 div 来清除浮动。缺点是每次都需要手动插入比较麻烦。
使用 overflow 属性
通过在父容器上使用 overflow 属性，可以解决父容器塌陷的问题。设置 overflow 的值为 hidden 或 auto 会迫使父容器扩展到包含所有浮动子元素的大小，从而避免塌陷。
#father {
overflow: hidden;
}
overflow 的值：
hidden：溢出的部分会被隐藏。如果容器内的浮动元素超出容器范围，这些部分会被裁剪掉，不显示。scroll：如果容器内的内容超出容器范围，会出现滚动条，用户可以通过滚动查看超出的内容。auto：如果内容超出容器的范围，则会自动显示滚动条。
overflow: hidden; 虽然能够解决父容器塌陷问题，但它会裁剪掉溢出部分的内容。因此，这种方法适用于容器内内容不会超出父容器的场景
使用 ::after 伪类
通过为父容器添加 ::after 伪元素，相当于在父类后面添加了一个宽、高都为0的小块，该小块不允许周围有浮动，逻辑和添加div标签差不多
清除的方法：
.container::after {
content: "";
display: block;
clear: both;
}
content: ""：创建一个空的伪元素display: block：确保伪元素是块级元素，能够触发清除浮动的效果。clear: both：清除左右浮动，使得父容器能够包裹所有浮动元素