css学习总结（一）—— 浮动

来源：互联网发布：石棉致癌机理知乎编辑：程序博客网时间：2024/05/03 19:39

float属性可以使块元素位于页面同一行内，但也存在以下问题：

1. 是否每行中所有同级块元素都要加float属性；
2. 当float元素后面的块元素如何换行；
3. 当页面（父元素）宽度缩小得比同行所有块元素宽度（包括margin和padding）之和要小时，后面的块元素会自动换行

解决以上问题的方法为：

问题1：

同行中的块元素最好都加上float属性，若只是在第一个元素上使用float属性时会出现以下情况

图1 仅在第一个元素（红色）上加入float属性时会出现错误

参考代码：
#div1{width:200px; height:200px; background:#900; margin: 20px; float:left;}#div2{width:300px; height:200px; background:#090; margin: 20px;}
<body>    <div id="div1" />    <div id="div2" /></body>
若在div2上也加入float:left属性则可解决此问题。
问题2：
通过clear属性让后续的块元素换行。

图2 增加clear属性后的效果

参考代码：

#div1{width:200px; height:200px; background:#900; margin: 20px; float:left;}#div2{width:300px; height:200px; background:#090; margin: 20px; float:left;}#div3{width:300px; height:200px; background:#7109AA; margin: 20px;}.clear {clear:both}

<body><div id="div1"></div><div id="div2"></div><div class="clear"></div><div id="div3"></div></body>

问题3：

通过父元素设置min-width来避免该问题。当浏览器宽度很小时，页面的布局必然被打乱，因此通过设置min-width，保证有一个足够大的容器可以容纳所有元素，布局便不会被打乱。

0 0