Float

来源：互联网发布：管家婆软件怎样? 编辑：程序博客网时间：2024/06/05 23:08

从不同的方面来了解float：

浮动的本质

浮动就是个带有方位的 display:inline-block 属性。
display:inline-block 某种意义上的作用就是包裹 ,而浮动也有类似的效果。
而float 无法等同于 display:inline-block,其中原因之一就是浮动的方向性,display:inline-block 仅仅一个水平排列方向,就是从左往右,而 float 可以从右往左排列, 这就是两者的差异。

浮动的属性参数：

浮动拥有三个参数:none:对象不浮动,left:对象浮动到左边,right:对象浮动到右边。
(浮动的最初意义就是文本围绕图片。)

float的塌陷为题（清除浮动，比较完善的一种方法）

  .clearfix:before,  .clearfix:after {     content: ".";     display: block;     height: 0;     visibility: hidden;     clear: both;     zoom: 1;/* IE < 8 */  }

一个关于文字环绕的demo：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>float</title>    <style type="text/css">        div{            width:400px;            height:400px;            background-color: gray;        }        i{            width:100px;            height:100px;            background-color: pink;            float: left;        }    </style></head><body>    <div>        <i></i>        <p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>    </div></body></html>

上面几处是我对浮动理解不充分地方的补充，前同事说“懂这个的话就比只知道怎么用的高几个level 了”，
原文出处
就酱，下班~~~

阅读全文

0 0