【零基础入门】 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）接着进行美化设置