上海网站建设 润,wordpress能采集,广州aso优化,视觉设计网站推荐问题#xff1a; 高度塌陷#xff1a;当所有的子元素浮动的时候#xff0c;且父元素没有设置高度#xff0c;这时候父元素就会产生高度塌陷。
解决方案#xff1a;
1#xff1a;给父元素单独定义高度 缺点#xff1a;子元素高超过父级时#xff0c;会出现溢出 … 问题 高度塌陷当所有的子元素浮动的时候且父元素没有设置高度这时候父元素就会产生高度塌陷。
解决方案
1给父元素单独定义高度 缺点子元素高超过父级时会出现溢出 示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0style.parent {height: 200px; /* 固定高度 */border: 1px solid #ccc;}.child {float: left;width: 100px;height: 150px;background-color: lightblue;margin: 10px;}/style
/head
bodydiv classparentdiv classchild/div/div
/body
/html2父级定义 overflow: hidden;兼容 IE 的 zoom: 1; 缺点超出部分被隐藏布局时要注意 示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0style.parent {overflow: hidden;zoom: 1; /* 兼容 IE */border: 1px solid #ccc;}.child {float: left;width: 100px;height: 150px;background-color: lightblue;margin: 10px;}/style
/head
bodydiv classparentdiv classchild/div/div
/body
/html 3在浮动元素后面加一个空标签 缺点增加空标签不利于页面优化 示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0style.parent {border: 1px solid #ccc;}.child {float: left;width: 100px;height: 150px;background-color: lightblue;margin: 10px;}.clearfix::after {content: ;display: block;clear: both;}/style
/head
bodydiv classparentdiv classchild/divdiv classclearfix/div/div
/body
/html 4父级定义 overflow: auto; 缺点内部宽高超过父级div时会出现滚动条 示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0style.parent {overflow: auto;border: 1px solid #ccc;}.child {float: left;width: 100px;height: 150px;background-color: lightblue;margin: 10px;}/style
/head
bodydiv classparentdiv classchild/div/div
/body
/html 5万能清除法给塌陷的元素添加伪对象 缺点有兼容性问题 示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0style.parent {border: 1px solid #ccc;}.child {float: left;width: 100px;height: 150px;background-color: lightblue;margin: 10px;}.clearfix::after {content: ;display: table;clear: both;}//如果需要兼容IE/7/6需要把以下这句加上.clearfix {*zoom: 1;}/style
/head
bodydiv classparentdiv classchild/divdiv classclearfix/div/div
/body
/html 通常来说使用伪元素清除浮动方式3和方式5是较为常见和推荐的做法。
