CSS3属性——浮动

—Miss. Z—

已于 2023-12-19 14:49:51 修改

阅读量1.8k

点赞数 1

分类专栏： HTML5/CSS3 文章标签： html/css 高度坍塌浮动

于 2022-08-14 16:34:39 首次发布

本文链接：https://blog.csdn.net/weixin_42071236/article/details/126310061

版权

18 篇文章 1 订阅

订阅专栏

float是CSS样式中的定位属性，用于设置标签对象(如<div>、<span>、<a>、<em>等HTML标签)的浮动布局。浮动也就是我们常说的标签对象浮动居左靠左(float:left)和浮动居右靠右(float:right)

浮动的应用场景

修改float属性值为：

默认值为none

如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒。

高度坍塌的根源：常规流盒子的自动高度在计算时，不会考虑浮动盒子

清除浮动，涉及css属性：clear

解决方法一：增加子元素，设置其clear属性
使用clear属性：在浮动元素的下方插入一个空元素，并为其应用clear: both;样式。这将阻止浮动的影响影响到后续的元素。

解决方法二：使用伪元素选择器
类似于第一种方法，但是使用伪元素而不是实际在HTML中插入空元素。

::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

方法二中，display:table;也可以

解决方法三：使用overflow属性
将浮动元素的父元素设置为overflow: auto;或overflow: hidden;。这会触发BFC（块级格式化上下文），使得父元素能够正确地包含浮动元素。

display: table;是CSS中的一个属性值，用于设置元素的显示类型为表格。这属性值通常用于创建类似表格的布局，但不会生成实际的表格元素（<table>、<tr>、<td>等）。相反，它改变元素的显示行为，使其表现得像表格一样。

用法说明：

属性	说明
table	(类似<table>)此元素会作为块级表格来显示，表格前后带有换行符。
inline-table	(类似<table>)此元素会作为内联表格来显示，表格前后没有换行符。
table-row-group	(类似<tbody>)此元素作为一个或多个行的分组来显示。
table-header-group	(类似<thead>)此元素作为一个或多个行的分组来显示。
table-footer-group	(类似<tfoot>)此元素作为一个或多个行的分组来显示。
table-row	(类似<tr>)此元素会作为一个表格行来显示。
table-column-group	(类似<colgroup>)此元素会作为一个或多个列分组来显示。
table-column	(类似<col>)此元素作为一个表格单元格列来显示。
table-cell	(类似<td>或<th>)此元素作为一个表格单元格来显示。
table-caption	(类似<caption>)此元素会作为一个表格标题来显示。

主要用途：

创建类似表格的布局：
当你希望使用表格布局的特性，但又不想使用实际的表格标签时，可以使用display: table;。这在一些特定的布局需求中很有用，例如，你可以使用display: table;创建一个具有表格结构的布局，但使用div元素而不是实际的表格标签。
解决浮动元素引起的高度塌陷问题：
在前面的回答中，我提到了在清除浮动时可以使用display: table;，将其应用于伪元素::after。这种方法利用了表格布局的特性，使得伪元素表现得像一个具有清除浮动效果的块元素。

关注

专栏目录