关于浮动的问题
如果有三个div块相邻排列，然后我给第一个div块加了左浮动，第二个div没有加，第三个div块加了左浮动，为什么不是显示成，两个div块在一行显示？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动溢出</title>
<style>
.container{
width: 500px;
height: 500px;
border: 2px solid #333333;
}
.box01{
width: 100px;
height: 100px;
background-color: blue;
color: #ffffff;
float: left;
/*clear: both;*/
}
.box02{
width: 100px;
height: 100px;
background-color: red;
color: #ffffff;
/*float: left;*/
/*clear: left;*/
}
.box03{
width: 100px;
height: 100px;
background-color: orange;
color: #ffffff;
float: left;
/*clear: left;*/
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="box01">11111</div>
<div class="box02">22222</div>
<div class="box03">33333</div>
<!--<p class="clear">jljlkfjklsajfkla flkasjfsuiowlflahiowv</p>-->
</div>
</body>
</html>0
收起
正在回答
2回答
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动溢出</title>
<style>
.container{
width: 500px;
height: 500px;
border: 2px solid #333333;
}
.box01{
width: 100px;
height: 100px;
background-color: blue;
color: #ffffff;
}
.box02{
width: 100px;
height: 100px;
background-color: red;
color: #ffffff;
float: left;
}
.box03{
width: 100px;
height: 100px;
background-color: orange;
color: #ffffff;
}
</style>
</head>
<body>
<div class="container">
<div class="box01">11111</div>
<div class="box02">22222</div>
<div class="box03">33333</div>
</div>
</body>
</html>一层浮动元素的后面加上一个不浮动元素但是不添加clear：both，不可以实现清除浮动的效果，建议同学按照老师教的方法清除浮动。
如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
从网页搭建入门Java Web2018版
- 参与学习 人
- 提交作业 1088 份
- 解答问题 10204 个
如果你有Java语言基础，又想以后从事Java Web开发，那么本路径是你的不二选择！本路径从网页搭建开始入手，通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星