clear : right; 右侧不允许有浮动元素
clear : left; 左侧不允许有浮动元素
clear : both; 两侧不允许有浮动元素
clear : none;
解决方法:
1.增加父级元素的高度
#box{
width: 1500px;
height: 500px;
border: 2px solid red;
}
2.增加一个空的div标签,清除浮动
<div class="clear"></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:
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;
}*/