关于css的float属性

关于float的特性:

1.从首个出现float的div位置开始浮动布局,之前div布局不会被遮盖,之后未浮动的div会被遮盖。


代码如下:

<body>
    <div style="width:100px;height:100px;border:1px solid #000;">div1</div>
    <div style="width:100px;height:100px;border:1px solid #000;">div2</div>
  
  <div style="float:left;width:100px;height:100px;border:1px solid 
#000;margin-left:100px;display:inline;">div3</div>
   
 <span style="float:left;width:100px;height:100px;border:1px solid 
#000;margin-left:100px;display:inline;">span1</span>

<div id="demo2">
  
  <div style="zoom:1;border: 1px #000 solid;width: 100px;height: 
100px;padding: 20px;margin: 20px;background: #f00;">div1</div>
  
  <div style="border: 1px #000 solid;width: 100px;height: 
100px;padding: 20px;margin: 20px;background: #0f0;">div2</div>
  
  <span style="border: 1px #000 solid;width: 100px;height: 
100px;padding: 20px;margin: 20px;background: 
#00f;">span1</span>
    <strong style="border: 1px #000 
solid;width: 100px;height: 100px;padding: 20px;margin: 20px;background: 
#f00;">strong1</strong>
</div>
</body>

显示效果:ff,chrome,ie8+

关于css的float属性_第1张图片


你可能感兴趣的:(关于css的float属性)