码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-12-06 22:24:55      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:

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

 

 

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

标签:

原文地址:http://www.cnblogs.com/feiganjue/p/5024398.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!