当前位置：首页 > news >正文

CSS（四）display和float

news 来源：原创 2025/5/18 23:53:36

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：清除左右浮动，使得父容器能够包裹所有浮动元素