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）左浮动元素必须向左尽可能元，右浮动元素必须向右尽可能元，位置越高，就会向右或向左浮动得越远。