【零基础入门】 css学习笔记（5）浮动

浮动

1.1、语法：

float: left; 左浮动，元素往最左边靠；
float: right; 右浮动，元素往最右边靠

1.2、floa属性：

1，尽可能远地向左或向右浮动，直到它的外边缘碰到包含框或另一个浮动框为止。然后它
们下面的所有内容会绕流这个元素（即像流体一样绕着这个元素流动）。

2，当一个元素浮动后，不会影响块级元素的布局，只会影响内联元素（通常是文本或图片）的布局。
**内联内容（包括文本）总会围绕着浮动元素，会留意浮动元素的边界；
块元素则会忽略浮动元素，正常流向页面。

1.3、浮动元素性质：

1，浮动的元素脱离标准流：这个元素像从标准流中被删除一样。
1）下图是两个div正常标准流下的显示效果。

2）下图是div1左浮动时的显示效果。

为什么显示效果是这样：
1）浏览器摆放上述浮动元素 div1时，把它尽可能放在最左边。
2）浏览器会从流中删除这个div1，就好像它浮在页面上一样。
3）由于div1已经从正常流中删除，所以标准流元素div2会往上移，填在该元素位置上。

2，浮动的元素有“字围”效果
浮动元素不会挡住没有浮动元素中的文字和图片即浮动元素下面的所有内容会绕流这个元素（即像流体一样绕着这个元素流动）。

3，浮动的元素会互相贴靠
a）如果父元素的宽度能显示所有浮动元素，则浮动的元素会并排显示。
b）如果父元素的宽度不能显示所有浮动元素，就会从最后一个开始往前贴靠。
c）如果贴靠了前面所有浮动元素后都不能显示，最终会贴到父元素的左边或右边。
案例：如下图中，父元素是body；
如果浏览器宽度足够，则div3会靠着div2；如表格图3
若靠着div2放不下，则div3会去靠div1；如表格图2
若靠div1也放不下，则自己去贴左墙；如表格图1

4，浮动的元素如果不设置宽，高，就会收缩为文字所占的大小。
例：div1设置了浮动，但没设置宽、高，自动缩紧为内容的宽度。

强调：
1，宏观的看，浮动就是做“并排”的。
2，无论是块级元素/行内元素，一旦浮动了，都可以设置宽高，不需要用display: block。因为浮动之后，脱离标准流了，所以标准流里面的规则都不适用了。
3，浮动流中不能用margin:0 auto；也没有居中对齐。

1.4 应用案例

1，水平导航栏
导航栏是链接列表，因此用<ul>和<li>是非常合适的
html代码如下：

分析：
1）导航栏不需要列表项的标记，因此要把圆点去掉；
2）还可把浏览器默认设定的外边距和内边距设为0；
3）水平方向摆放，对li进行浮动；
4）一般每个链接的宽度是一样的，而且整个链接域都可点击（不仅仅是文本），因此要对a进行设置

5）接着进行美化设置