CSS（11）父级边框塌陷问题_随笔

父级边框塌陷问题 clear clear : right; 右侧不允许有浮动元素 clear : left; 左侧不允许有浮动元素 clear : both; 两侧不允许有浮动元素 clear : none; 解决方法： 1.增加父级元素的高度 #box{ width: 1500px; height: 500px; border: 2px solid red; } 2.增加一个空的div标签，清除浮动 <div ></div> .clear{ clear: both; margin: 0; padding: 0; } 3.在父级元素中添加一个overflow #box{ border: 2px solid red; /*超出部分 overflow: scroll滚动条 hidden隐藏*/ overflow: hidden; } 4.父类添加一个伪类after（推荐） #box:after{ content: ‘‘; display: block; clear: both; }

使用空div和伪类after就不要设宽高了

html：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> ? <link rel="stylesheet" href="../浮动/style.css"> ? </head> <body> ? <div id="box"> ? <div> <img src="../浮动/resources/qqyzml.png" alt=""> </div> ? <div> <img src="../浮动/resources/王一博.jpg" alt="" width="200" height="500"> </div> ? <div> <img src="../浮动/resources/表情包.jpg" alt=""> </div> ? <p> 王一博（YiBo），1997年8月5日出生于中国河南省洛阳市。 </p> ?  ? </div> ? </body> </html>

css：

#box{ border: 2px solid red; /*超出部分 overflow: scroll滚动条 hidden隐藏*/ /*overflow: hidden;*/ } ? #box:after{ content: ‘‘; display: block; clear: both; } ? div{ border: 2px solid red; } ? div:nth-of-type(1){ display: inline-block; float: left; } ? div:nth-of-type(2){ display: inline-block; float: left; height: 500px; } ? div:nth-of-type(3){ display: inline-block; float: left; } ? p{ display: inline-block; border: 2px solid red; float: left; /* clear : right; 右侧不允许有浮动元素 clear : left; 左侧不允许有浮动元素 clear : both; 两侧不允许有浮动元素 clear : none; */ /*clear: none;*/ ? } ? /*.clear{ clear: both; margin: 0; padding: 0; }*/

CSS（11）父级边框塌陷问题

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/1006849.html

CSS（11）父级边框塌陷问题

发表评论

评论列表（0条）