谈谈浮动布局

浮动布局是网页布局的一种常用方式,它能使元素向左或向右浮动,直到碰到父元素边框或另一个浮动元素。

它主要用于:

1. 实现文字环绕图片的效果将图片设置为向左或向右浮动,可以使得文字围绕在图片周围,实现文字环绕图片的效果。

2. 产生多列布局
通过将一系列块级元素设置浮动,可以使他们排列在同一行,从而产生多列布局效果。

关于浮动,有几点需要注意:

1. 浮动元素会脱离标准文档流,但其空间依然保留。这会产生未清除浮动的影响,需要清除浮动来修复。

2. 浮动元素只会影响其后的标准流块级元素。浮动元素不会影响行内元素、浮动元素和定位元素。3. 浮动元素的父级边框会包裹住浮动元素。如果父级没有边框,则需要使用overflow来清除浮动的影响。

4. 浮动元素是相对其第一个不是浮动的父元素进行定位的。

5. 多个相邻浮动元素会并排显示,直到父元素边框端为止。可以使用clear来结束浮动。6. 如果浮动元素也设置了定位,则定位的效果会覆盖浮动的效果。

常用的清除浮动的方法有:

1. 使用clear:both在最后一个浮动元素下方的元素中使用clear:both可以清除浮动。

2. 使用空的div并clear:both
在浮动元素下方添加一个空的div,并设置clear:both。

3. 使用overflow
设置父元素的overflow为hidden、auto或scroll均可清除浮动。

4. 使用after伪元素clear:both
在父元素中使用after伪元素,并设置content、display和clear来清除浮动。

5. 父元素也浮动
让浮动元素的父元素也浮动,则不会产生浮动的影响。以上就是关于浮动布局的介绍和一些注意事项。掌握浮动布局可以让你的网页产生更加复杂的布局效果,