Web全栈开发案例教程课件 第2章2.5 浮动和定位.pptxVIP

2.2.5浮动

盒子的浮动在标准流中，块级元素的盒子都是上下排列，行内元素的盒子都是左右排列，限制太大。所有盒子浮动

效果：相邻块级元素的盒子左右排列一个盒子浮动

浮动盒子被后面未浮动盒子中的内容所环绕，做出图文混排的效果左浮动

一个盒子浮动和多个盒子浮动

默认样式浮动样式HTML代码顺序：div左列/divdiv右列/divp……/p

浮动效果展示结论：通过CSS浮动布局，可以在不改变HTML代码的同时，调整盒子的显示位置。

两个盒子的故事

误差原因：左列进行浮动后，脱离了默认文档流，所以只剩右列的盒子。解决方法：同一层盒子的一起加浮动属性。我也浮动左浮动

总结：一个盒子浮动后的特点（1）浮动后的盒子将以行内块元素显示，但宽度不会自动伸展。（2）浮动的盒子将脱离标准流，即不再占据浏览器原来分配给它的位置。（3）未浮动的盒子将占据浮动盒子的位置，同时未浮动盒子内的内容会环绕浮动后的盒子。

2.多个盒子浮动的特点多个盒子都浮动后，就产生了块级元素水平排列的效果①多个浮动元素不会相互覆盖，一个浮动元素的外边界（margin）碰到另一个浮动元素的外边界后便停止运动。②若包含的容器太窄，无法容纳水平排列的多个浮动元素，那么最后的浮动盒子会向下移动。但如果浮动元素的高度不同，那当它们向下移动时可能会被卡住

2.2.5浮动的应用举例1图文混排及首字下沉效果

【例2-