2. 浮动的初始概念 你可能对浮动元素的概念已经有所了解,浮动不完全是定位,也不是正常的流布局。 http://www.swordair.com/blog/2010/08/415 CSS 规定:a. 任何元素都可以浮动;b. 浮动不能被继承; 浮动定义:浮动是处于文档流中的元素,脱离了源文档流,通常是左(右),元素浮动之后,其周围的元素将自动补齐其留下来的空间 浮动属性:left | right | none | inherit http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/ 一个浮动的例子: <div class="box"> <img class="fl" src="beauty.png" alt=" /> <p> The concept of floats is probably one of the… </p> </div>
3. 浮动元素 用 CSS 浮动元素时,会出现一些有意思的问题 1. 浮动元素会脱离原先的文档流; 2. 浮动元素的外边距不会合并; 3. 如果要浮动一个非置换元素,必须为其声明一个 width 属性 4. 行内元素设置浮动之后,将自动转化为块级元素。 还是刚才的例子: <div class="box"> <img class="fl" src="beauty.png" alt=" /> <p> The concept of floats is probably one of the… </p> </div>
4. 不浮动 除了 left 和 right 之外,float 属性还有一个值,也就是默认值 none; 这样的设置似乎有些多余,因为要让一个元素不浮动,最直接的方式就是不声明 float 。 不过他确实很重要,如果没有这个值,所有的元素都会以某种方式浮动。 而且,当你需要重置元素 float 属性的时候,就会用到。 一个的例子: <div class="box"> <img class="nfl" src="beauty.png" alt=" /> <p> The concept of floats is probably one of the… </p> <p> The concept of floats is probably one of the… </p> </div>
5. 浮动的详细内幕 为了更好的理解浮动的详细,我们需要建立包含块(containing block)的概念。 http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/ 这个很重要。浮动元素的包含块是其最近的块级祖先元素。 下面的例子当中,浮动的 img和 p 元素的包含块就是 div.box 一个的例子: <div class="box"> <img class="nfl" src="beauty.png" alt=" /> <p> The concept of floats is probably one of the… </p> <p> The concept of floats is probably one of the… </p> </div>
6. 浮动的详细内幕 俗话说:不规矩,无以成方圆。浮动也是如此。 有一系列的规则控制着浮动元素的摆放。 一、浮动元素外边界不能超出其包含块的内边界。 一个的例子: <div class="box"> <img class="nfl" src="beauty.png" alt=" /> <p> The concept of floats is probably one of the… </p> <p> The concept of floats is probably one of the… </p> </div> margin padding ① ②