四、浮动
浮动的作用：图文混排、分栏布局（依赖浮动与清除浮动）。
在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素的边界；而在竖直方向和兄弟元素依次排列，不能并排。而使用“浮动”方式后，块级元素的表现就会有所不同。
浮动的相关属性： float: 设置浮动 clear: 清除浮动元素
float: 定义元素浮动方式，取值：
- none（元素不浮动，并会显示在其文本中出现的位置，同时也是浮动属性的默认值）
- left: 元素向左浮动（图像或文本浮动在父元素的左边）
- right：元素向右移动（图像或文本浮动在父元素的右边）
float 属性定义元素在哪个方向浮动。如果将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠近，同时默认情况下，盒子的宽度不再伸展，而是收缩，根据盒子里面的内容的宽度来确定。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动某元素，它会尽可能地窄，仅包裹内部内容， 可以指定一个明确的宽度。
1、理解浮动（float）
图文混排—未浮动时
<div id="container"> <img src=“images/HTML5_Logo.png” alt=“HTML5” width=“128px”> <p>标准通用标记语言下的一个应用……</p> </div>
图文混排 – 浮动时
<div id="container"> <img src=“images/HTML5_Logo.png” alt=“HTML5” width=“128px”> <p>标准通用标记语言下的一个应用……</p> </div>
左浮动：
#container img { float: left;}
右浮动：
#container img { float: right;}
两处浮动:
<div id="container"> <img src=“images/HTML5_Logo.png” alt=“HTML5” width=“128px”> <img src="images/css3-512.png" alt="CSS3" width="128px"> <p>标准通用标记语言下的一个应用……</p> </div>
#container img { float: left;}
2、浮动定位准则
设置了浮动的元素：
- 会向相应方向浮动至父元素或另一个浮动对象的边界。
- 浮动元素不再占用原本在文档中的位置。
- 其后续元素会自动向前填充，遇到浮动对象边界则停止。\
3、clear属性
clear：设置清除浮动方式，取值：
- none：允许浮动元素，默认值；
- left：清除左侧浮动；
- right：清除右侧浮动；
- both：清除左、右两侧浮动。
清除浮动
<div id="container"> <img src=“images/HTML5_Logo.png” alt=“HTML5” width=“128px”> <p>标准通用标记语言下的一个应用……</p> </div>
#container img { float: left;}#container p { clear: left;}
4、分栏布局
"栏目"—块级元素，可以设置宽度、高度，但块级元素默认是垂直排列的。
利用浮动实现分栏布局 - 思路
- 利用浮动属性将块级元素水平排列
- 利用清除浮动属性实现不分栏区域
分栏布局实例
<body> <div class="wrapper"> <header>标题区</header> <aside class="left_sidebar">左侧边栏</aside> <main>主内容区</main> <aside class="right_sidebar">右侧边栏</aside> <footer>页脚</footer> </div> </body>
* { margin: 0; padding: 0; } body { background-color: #cccccc; } .wrapper { width: 800px; margin: 0 auto; background-color: white; } header { height: 80px; background-color: DARKSEAGREEN; color: white; } aside, main { float: left; } .left_sidebar { width: 150px; height: 200px; background-color: blue; } main { width: calc(100% - 250px); height: 600px; background-color: CORAL; } .right_sidebar { width: 100px; height: 600px; background-color: KHAKI; } footer { clear: both; height: 80px; background-color: bisque; }
