CSS 浮动(float:left),清除浮动(clear:both)

来源:互联网 发布:java业余培训学校 编辑:程序博客网 时间:2024/04/30 11:01
CSS浮动和清除
float:left(左浮动), float:right(右浮动);
浮动的元素可以理解为该元素已经脱离文档流。“已经不存在了”
浮动只有两个方向:left,right

浮动的位置:

浮动到父元素的边界或其它浮动元素的边上。

浮动元素的层级高于普通元素。(浮动元素在顶层)

凡是浮动的元素都是块元素。(添加float:left;后自动变成块元素)
如果浮动前是行内元素,浮动后自动转为块元素。
备注:行内元素没有宽高(设置宽高不起作用),只有块元素才有宽高。

使用浮动的情况:
1.将块元素显示在同一行。
2.将无序列表横向排列(导航的制作)
3.主要应用于排版(DIV+CSS)



浮动的清除
凡是设置了浮动之后,一定要清除浮动。
不清除前面的浮动,会对后面的元素造成影响。(上面的浮动属性,如果不清除,下面的元素会默认继承。)

清除浮动的写法:

clear:left,right,both;

.clear{clear:both},清除两边,我们通常用在版权独占一行。

浮动清除的位置:

设置浮动属性元素的后面。

通常,用一个空的<div class=”clear”></div>


overflow属性 hidden scroll auto  (溢出: 溢出部分隐藏,滚动条,自动)