前端学习（310）：清除浮动的方法

我们经常把高度塌陷问题也叫做常见的几种清除浮动的方法

高度塌陷问题—父元素高度自适应，子元素float后，造成父元素高度为0，就叫做高度塌陷问题

给父元素一个高度

缺点：无法高度自适应

父元素{overflow:hidden;}

缺点：父元素框之外的部分会被隐藏

在浮动的子元素的末尾，添加一个空div，并设置如下样式

div{clear:both; height:0;overflow:hidden;} 缺点：容易造成代码冗余

万能清除浮动法

父元素:after{content:””;display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>清除浮动的方法</title><style>*{margin: 0;padding: 0;}/* 方法一给父元素加一个高度 *//* .box{width: 600px;padding: 10px;background: gray;margin: 50px;height: 300px;} *//* 方法二 给父元素添加overflow-hidden 块级格式化上下文*//* .box{width: 600px;padding: 10px;background: gray;margin: 50px;overflow: hidden;} *//* 方法三末尾加一个空的div */.box{width: 600px;padding: 10px;background: gray;margin: 50px;}.childDiv{width: 200px;height: 300px;float: left;position: relative;left: 0;top: -50px;}.childDiv:nth-child(1){background: red;}.childDiv:nth-child(2){background: blue;}.childDiv:nth-child(3){background:pink;}/* 为了兼容ie: 6;的问题 *//* .clear{clear: both;height: 0;overflow: hidden;} *//* 方法四伪元素 */.box:after{content: "";display: block;clear: both;height: 0;overflow: hidden;/* 空间在 内容不显示 */visibility: hidden;}</style>
</head>
<body><div class="box"><div class="childDiv"></div><div class="childDiv"></div><div class="childDiv"></div><!-- <div class="clear"></div> --></div>
</body>
</html>

运行结果

前端学习（310）：清除浮动的方法相关推荐

“约见”面试官系列之常见面试题之第五十五篇之清除浮动的方法（建议收藏）
清除浮动的几种方法标准流:盒子会各占整行位置.子盒子若是标准流,父盒子虽然没有高度,但是会撑开父盒子高度. 浮动:盒子浮了起来,不会占据原来的位置,若父盒子没有定义高度,则不会撑开父盒子,父盒子高 ...
详细解读css中的浮动以及清除浮动的方法
对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家. 导读: 1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后,如何清除浮 ...
div为空的时候浮动没有效果_3种CSS清除浮动的方法
点击上方 "前端技术精选" 关注,星标或者置顶 12点00分准时推送,第一时间送达作者:html中文网 | 编辑:前端妹来源:html.cn/web/css/19613.htm ...
css为什么要用浮动_3种CSS清除浮动的方法
点击上方 "前端技术精选" 关注,星标或者置顶 12点00分准时推送,第一时间送达作者:html中文网 | 编辑:前端妹来源:html.cn/web/css/19613.htm ...
触发bfc的html元素,什么是BFC？ CSS 使用伪元素清除浮动的方法
BFC概念: 块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响. 我们先了解一个名词:BFC(block formatting co ...
清除浮动的方法总结CSS实现水平垂直居中方法总结
1.清除浮动的方法总结当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至 ...
现在比较流行的一种新的清除浮动的方法
清除浮动的方法一般有很多种,我们都是根据实际情况或者自己的习惯来清除浮动,最近发现一种比较常用的清除浮动的方法: .cf:before, .cf:after {content: " &quo ...
css清除浮动的方法及原因
清除浮动的方法及原因为什么要清除浮动清除浮动的方法方法1:为父元素设置高度方法2:在受影响的父元素内部末尾添加块级元素-如div 方法3:伪元素清除法方法4:给父元素设置overflow: ...
CSS清除浮动的方法
我们先看看浮动导致什么样的效果. 正常没有浮动的案例如下: <!DOCTYPE html> <html><head><meta charset="u ...

前端学习（310）：清除浮动的方法

前端学习（310）：清除浮动的方法相关推荐

最新文章

热门文章