本文介绍了HTML中的盒子浮动，如何通过设置`float`属性让元素水平排列，详细讲解了浮动的`left`和`right`选项，以及浮动元素对周围元素的影响。同时，讨论了清除浮动的重要性，使用`clear`属性防止页面错位，并提到了清除浮动对于解决父级元素高度问题的作用。此外，还提及了常见的CSS两列和三列布局样式。
·盒子的浮动
- 浮动
块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开，
如果希望块元素在页面中水平排列，可以使块元素脱离文档流
使用float来使元素浮动，从而脱离文档流
可选值：
none，默认值，元素默认在文档流中排列
left，元素会立即脱离文档流，向页面的左侧浮动
right，元素会立即脱离文档流，向页面的右侧浮动
当为一个元素设置浮动以后（float属性是一个非none的值），元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动元素浮动以后，会尽量向页面的左上或这是右上漂浮，直到遇到父元素的边框或者其他的浮动元素如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素浮动的元素不会超过他上边的兄弟元素，最多最多一边齐。
- 清除浮动
在页面布局时，浮动属性的确可以帮助用户实现良好的布局效果，但如果使用不当就会导致页面出现错位的现象。在css样式中，浮动与清除浮动是相互对立的，使用清除浮动不仅能解决页面的错位的现象，还能解决子级浮动导致父级元素背景无法自适应子级元素高度的问题。
语法：clear：none | left | right | both
·常用的css布局样式
- 两列布局样式
- 三列布局样式
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
