CSS中用float属性可以设置元素浮动。通过浮动,可以实现元素的排列、布局和定位等效果。float: none; /* 元素不浮动 */ float: left; /* 元素向左浮动 */ floa
CSS中用float属性可以设置元素浮动。通过浮动,可以实现元素的排列、布局和定位等效果。
float: none; /* 元素不浮动 */ float: left; /* 元素向左浮动 */ float: right; /* 元素向右浮动 */ float: inherit; /* 继承父元素的float属性值 */
浮动元素会尽量靠近容器边缘,如果宽度不够,则会自动换行。
在实际使用中,可以通过浮动来实现多列布局、图片环绕文字、导航菜单等效果。
/* 实现左右两列布局 */ .container { width: 800px; height: 500px; margin: 0 auto; } .left { width: 200px; height: 100%; float: left; } .right { width: 600px; height: 100%; float: left; } /* 图片环绕文字 */ .img-box { width: 300px; height: 200px; float: left; margin-right: 20px; } .text-box { width: 500px; height: 200px; float: left; } /* 导航菜单 */ .nav { width: 100%; height: 50px; } .nav li { float: left; margin-right: 20px; }
浮动会影响页面的布局和位置,需要注意清除浮动和解决浮动造成的影响。清除浮动可以使用clear属性,解决影响可以使用overflow属性、伪元素等。
/* 清除浮动 */ .clearfix::after { content: ""; display: block; clear: both; } /* 解决影响 */ .wrap { width: 800px; height: 500px; overflow: auto; }
粉丝
0
关注
0
收藏
0