css中元素的浮动和清除浮动的影响

用float属性可以使元素浮动到包含框内的左右边使文本围绕它，这里创建一个包含框内有段落和一个小的div并被包围：

<html>
  <head>
  <title><title>
<style type="text/css">
div{
    border:1px solid red; 
    width:200px;
            height:200px;
            }

         .div1{
               background-color:yellow;
               float:right;
               width:100px;
               height:100px;
              }
</style>
</head>
<body>
<div>
    <div class="div1">
       <p>用float属性可以使元素浮动到包含框内的左右边使文本围绕它，这里创建一个包含框内有段落和一个小的div：</p>
     </div>
</div>

上面浮动元素从文档流中脱离出来的同时对布局中其它元素造成影响， 使围绕他的元素重新布局。

 

要让浮动元素某一边的区域被清除，后面的元素从元素的正常位置开始显示，可以使用clear属性不

让一个元素出现在浮动元素后面：

<html>
  <head>
  <title><title>
<style type="text/css">
 

       div{
             border:1px solid red; 
             width:200px;
             height:400px;
             }

       .div1{
               background-color:yellow;
               float:right;
               width:100px;
               height:100px;
              }

           h2{
               clear:left;
               }
</style>
</head>
<body>
<div>
    <div class="div1">
       <p>用float属性可以使元素浮动到包含框内的左右边使文本围绕它，这里创建一个包含框内有段落和一个小的div：</p>
      <h2>这里用CLEAR属性可以清除浮动元素</h1>
     </div>
</div>
</body>
</html>