float: left; 或 float: right;
使用浮动布局可以实现多栏布局、文字环绕图片、响应式布局等效果。但是需要注意,浮动元素会影响其他元素的布局,可能会导致父容器高度塌陷的问题。
clear: both;
为了解决这个问题,可以通过clear属性清除浮动。clear属性可以取的值有left、right、both和none,默认值为none。设置clear: both;可以清除当前元素的左右浮动,避免父容器高度塌陷。
另外,为了避免出现意外的布局问题,一般会对浮动元素设置明确的宽度和高度,以及适当的外边距和内边距。
width: 200px; height: 200px; margin: 10px; padding: 20px;
总的来说,掌握浮动布局是CSS布局的基础之一,值得花费时间和精力深入学习。