如何用模版做网站,建站吧网站建设,网页游戏在线,网站设计的第一步是我们经常把高度塌陷问题也叫做常见的几种清除浮动的方法 高度塌陷问题—父元素高度自适应#xff0c;子元素float后#xff0c;造成父元素高度为0#xff0c;就叫做高度塌陷问题 给父元素一个高度 缺点#xff1a;无法高度自适应 父元素{overflow:hidden;}
缺点#xf…我们经常把高度塌陷问题也叫做常见的几种清除浮动的方法 高度塌陷问题—父元素高度自适应子元素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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle清除浮动的方法/titlestyle*{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
bodydiv classboxdiv classchildDiv/divdiv classchildDiv/divdiv classchildDiv/div!-- div classclear/div --/div
/body
/html
运行结果
