CSS细节复习笔记——浮动

CSS除了能够改变字体、背景和所有其他属性，还能够完成基本布局任务。

div+css通过浮动和定位、盒子模型等技术应用，是最常用的布局方式。

定位的基本思想很简单，它允许定义元素框相对于其正常位置应该出现在哪里，或者相对于父元素，另一个元素甚至浏览器窗口本身的位置。

另一方面，css1提出浮动。浮动不完全是定位，不过，他当然也不是正常流布局。

浮动

声明<img src ="b5.jpg" align="right">会导致一个图像浮动到右边，而允许其他内容（文本）“围绕”该图像。css允许浮动任何元素，从图像到段落再到列表，所有元素都可以浮动，使用属性float实现。

因此，上述代码还能写作<img src ="b5.jpg" style="float:left">。

浮动元素

对于浮动元素，有几点要记住。首先，会以某种方式将浮动元素从文档的正常流中删除，影响布局。一个元素浮动是，其他内容会“环绕”该元素。

注意，浮动元素周围的外边距不会合并。如果浮动一个有20像素外边距的图像，在这个图像将至少有20像素的空间。如果其他元素与此图像响铃，而且都有外边距，那么这些外边距不会与浮动图像的外边距合并。

如果确实要浮动一个非替换元素，则必须为该元素声明一个width，否则，浮动段落可能只有1个字符宽。

不浮动

除了left和right外，float属性还有一个值。float:none用于防止元素浮动。也许不会认为，如果让一个元素不浮动，就不声明float，实际上，要得到正常的非浮动元素，必须有这个值，不然所有元素都会以某种方式浮动。

浮动的详细内幕

深入讨论浮动的详细内容之前，首先要建立包含块的概念。浮动元素的包含块是最近的块级祖先元素。因此，在以下标记中，浮动元素的包含块就是包含该浮动的段落元素：

<h1>Test</h1> <p><img src ="U54.jpg" style ="float:right;border:1px solid #000">     This is paragraph text,but you knew that. Whthin the content of this paragraph id an image that's been floated.The containing block for the floated image is the paragraph.</p>

此外，浮动元素会生成一个块级框，而不论这个元素本身是什么，因此如果让一个链接浮动，即使该链接本身是行内元素，通常会生成一个行内框，但只要她是浮动的，就会生成一个块级框，规则：

1）浮动元素的左右边界不能超出其包含块的左右内边界。（虽然设置负边距或浮动元素比其父元素更宽，会让其出现在父元素的外面。）

2）浮动元素的左右外边界必须是源文档中之前出现的左浮动（或右浮动）元素的有（左）边界，除非后出现浮动元素的顶端在先出现的浮动元素的底端下面。

浮动内容都是可见的，不必担心一个浮动元素与另外一个浮动元素重叠。而使用定位情况会完全不同，可能会导致元素相互覆盖。

3）左浮动元素的右边界不会在其右浮动元素的左外边界的右边。一个右浮动元素的左外边界不会在其左浮动元素的右外边界的左边。

4）一个浮动元素的顶端不能比其父元素的顶端更高。如果一个浮动元素在两个合并外边距之间，放置这个浮动元素时就好像在两个元素之间有一个块级父元素。

这能防止浮动段落一直向上移动到三个段落共同的父元素顶端。

5）浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。

6）如果源文档中一个浮动元素之前出现另一个元素，浮动元素的顶部当不能比包含该元素所生成框的任何行框的顶端更高。

7）左（或右）浮动元素的左边（右边）有另一个浮动元素，前者的右外边界不能在其包含块的有（左）边界的右边（左边）。

8）浮动元素必须尽可能高低放置。

9）左浮动元素必须向左尽可能元，右浮动元素必须向右尽可能元，位置越高，就会向右或向左浮动得越远。

实用行为

在段落1中插入左浮动的图片：

这样看浮动元素超出了左元素的底端，但是不明显。前面讨论的浮动规则只处理乐路浮动元素和其父元素的左右和上边界，而没有涉及下边界。

css2.1澄清了浮动元素行为的一个方面：浮动元素会延伸，从而包含其所有后代浮动元素。

设置图片左边距10像素，同时添加Test标题的背景和边框：

由于浮动元素同时处于流内和流外，所以这种情况肯定会发生。标题的内容由浮动元素“显示”，不过标题元素的宽度还是和父元素相等。为了避免盖在浮动元素下面，具体内容并不从其内容区左边界开始显示。

清除

你可能并不总是希望内容流过浮动元素，某些情况下，可能要特意避免这种行为。在这种情况下，你希望将没小节第一个元素设置为禁止浮动元素出现在它旁边。如果第一个元素可能放在一个浮动旁边，则会向下推，直到出现子啊浮动元素的下面，而且所有后续内容都在其后面出现。

这可以利用clear属性完成。

给标题“Test”添加属性clear:left

类似于html中的<br clear = "left">防止h3元素左边有浮动元素，还会把h3推过所有左浮动元素，不过还允许浮动元素出现在h3右边。