这篇文章将为大家详细讲解有关怎么用CSS清除浮动,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
CSS出现清除浮动的问题的原因:在标准流下面,父元素没有设置高度属性,且父元素中的子元素是浮动,由于浮动元素不再占用原文档流的位置,浮动元素的高度不会计算在父元素的高度中,即呈现塌陷的状态。
一、为什么会出现清除浮动的问题?
(学习视频推荐:java视频教程)
如果在标准流下面一个父元素没有设置高度属性,那么它的高度就会被子元素的高度撑开,即自适应。但是如果这个父元素中的子元素是浮动的话,由于浮动元素不再占用原文档流的位置,浮动元素的高度不会计算在父元素的高度中,父元素的高度会为0,即呈现塌陷的状态。我们为了解决这类问题,提出了清除浮动。
二,怎么用CSS清除浮动?
1,直接给父元素添加高度
但是在浮动元素高度不确定的时候不适用
2,直接利用明确的:两个
直接在父元素的最底下添加一个块级标签(p, div等),然后赋予它清楚:都来清除浮动。
但是这样会产生大量没有用的空元素,浪费资源,不是最优解
3,利用黄东海:
(1)什么是黄东海
直译为“块级格式化上下文“。它是一个独立的渲染区域,是一个独立的布局环境,其中的元素布局是不受外界的影响,并且在一个黄东海中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
(2)解决方案一:
给父元素样式添加溢出:隐藏(只要不是可见的),添加这个语句后,会创建一个黄东海,会把浮动元素困在黄东海中,不让其脱离文档流,会先计算浮动元素的高度,再藏隐藏,父元素获得高度,就会撑开
(3)解决方案二:
给父元素添加浮浮动:正确的(只要不是none),添加这个语句也会创建一个黄东海,原理相同,但是有时候我们不需要让父元素浮动,与我们的需求相违背
4,利用伪类
通过父元素的::后伪元素来生成浮动元素的兄弟元素,然后兄弟元素使用清楚:两方法。
关于怎么用CSS清除浮动就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
怎么用CSS清除浮动
