css为什么会出现清除浮动的问题(css中清除浮动的目的有哪些)

lxf2023-02-16 15:32:27

css清除浮动问题的原因:在标准流下,父元素没有设置高度属性,父元素中的子元素是浮动的。由于浮动元素不再占据原文档流的位置,浮动元素的高度不会计算在父元素的高度,即塌陷状态。

css为什么会出现清除浮动的问题(css中清除浮动的目的有哪些)

本教程操作环境:windows10系统、css3,本文适用于所有品牌的计算机。

1、为什么会出现清除浮动的问题?

(学习视频推荐:java视频教程)

如果标准流下的父元素没有设置高度属性,则其高度将被子元素的高度打开,即自适应。但是,如果父元素中的子元素是浮动的,由于浮动元素不再占据原始文件流的位置,浮动元素的高度不会计算在父元素的高度中,父元素的高度为0,即塌陷状态。为了解决这些问题,我们提出了清除浮动。

二、如何用CSS去除浮动?

1、直接给父元素添加高度

但不适用于浮动元素高度不确定时

2、直接使用clear:both

直接在父元素的底部 添加块级标签(p,div等。),然后给它clearrr:both 去除浮动。

但这会产生大量无用的空元素,浪费资源,而不是最优解

3、利用BFC:

(1)什么是BFC

直译为