float: left; /* 左浮动 */ float: right; /* 右浮动 */ clear: both; /* 清除浮动 */
浮动的好处是可以让元素在页面展示更灵活性,但也有一些需要注意的地方。
首先是浮动元素会脱离文档流,导致其他元素的位置和大小受到影响,需要给父级元素添加清除浮动属性以避免这种情况。
.clearfix::after { content: ""; display: table; clear: both; }
其次,浮动元素的高度可能会受到浮动元素的影响而变化,需要对父级元素添加 clearfix 清除浮动才能保证元素的高度正确。
在移动端浏览器中,浮动元素的兼容性有一些问题,需要使用 flex 或者 grid 等方式进行替代,避免出现兼容性问题。
.parent { display: flex; flex-wrap: wrap; } .child { flex: 1; margin: 10px; }
总之,在使用浮动的过程中,需要注意清除浮动,避免元素的高度变化,同时也要注意到移动端浏览器中的兼容性问题。