CSS浮动和清除浮动?

html-css017

CSS浮动和清除浮动?,第1张

清除浮动并不是指清除浮动元素本身的浮动,而是在浮动元素的外面(前面或后面)进行清除,也就是清除浮动元素对其他后续元素的影响。浮动元素相当于漂浮在空中,那么它原来在地面所占用的位置就被收回了,后面的其他元素就会自动占用这个位置(具体表现就类似于其他元素钻到这个浮动元素的下面去了),而清除浮动的意思就是把浮动元素原来在地面的占用位置找回来,这样后面的其他元素的位置就不会受这个浮动元素的影响了。

具体做法可以在浮动元素的后面插入一个块级元素来清除浮动,下面是最简单的一种:

<div class="d1"></div>

<div class="d2"></div>

<br style="clear:both"/>

<div class="d3"></div>

在div+css中浮动不起作用,可能是原因是你设置flaot的这个元素不是块级元素,所以float对它是不起任何作用的,如span和a这些标签,我这里写个代码:

<html>

<head>

<style>

#sub{ //通过id实现

width:300px //只是假定的值,需要根据实际的要求写。

height:30px

float:left

}

span{ //通过id实现

width:300px

height:30px

float:left 不是块级元素,不会有float属性的

}

</head>

<body>

<div>

<div id=sub>测试文字,</div>

<span>我不会浮动的</span>

</div>

</body>

</html>

我们想要浮动的话,只要将span那在加一个display:block;就能够实现浮动了。

display:

block

是指显示为块级元素。

如果你从新定义过了display属性,那么定位就会用不同的方式显示。图中的元素因为失去了块级元素的属性所以叠加在了一起。

希望有帮到您。