关于浮动的问题

如果有三个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>

风中随影 2018-07-24

源自：float浮动 2-2 浮动的基础知识

收起

2回答

好帮手慕阿莹回答被采纳获得+3积分 2018-08-23 10:20:00

<!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>