全国咨询/投诉热线:400-618-4000

css清除浮动的方法有哪些?[web前端开发]

更新时间:2019年09月17日17时05分 来源:传智播客 浏览次数:

 
由于浮动标记不再占用原文档流的位置,所以它会对页面中其他标记的排版产生影响。这时,如果要避免浮动对段落文本的影响,就需要在<p>标记中清除浮动。在CSS中,常用clear属性清除浮动。运用clear属性清除浮动的基本语法格式如下:
 
选择器{c1eax:属性值;}
 
上述语法中,clear属性的常用值有三个
clear:left——不允许左侧有浮动标记(清除左侧浮动的的影响)
clear:right——不允许右侧有浮动标记(清除右侧浮动的影响)
clear:both——同时清除左右两侧浮动的影响
 
了解clear属性的三个属性值及其含义之后,接下来通过对电子案例11-1中的<p>标记应用cear属性,来清除周围浮动标记对段落文本的影响。在<p>标记的Css样式中添加如下代码:
 
clear:left;  /* 清除左浮动 */
 
上面的CSS代码用于清除左侧浮动对段落文本的影响。添加“clear:left;”样式后,保存HTML文件,刷新页面,清除段落文本左侧的浮动后,段落文本会独占一行。需要注意的是,clear属性只能清除标记左右两侧浮动的影响。然而在制作网页时,经常会受到一些特殊的浮动影响,例如,对子标记设置浮动时,如果不对其父标记定义高度,则子标记的浮动会对父标记产生影响,那么究竟会产生什么影响呢?
 
CSS 清除浮动


我们知道子标记和父标记为嵌套关系,不存在左右位置,所以使用clear属性并不能清除子标记浮动对父标记的影响。那么对于这种情况该如何清除浮动呢?为了使初学者在以后的工作中能够轻松地清除一些特殊的浮动影响,我们总结了常用的三种清除浮动的方法,具体介绍如下:
1)使用空标记清除浮动
在浮动标记之后添加空标记,并对该标记应用“clear: both”样式,可清除标记浮动所产生的影响,这个空标记可以是<dv>、<p>、<hr/>等任何标记。
 
2)使用 overflow属性清除浮动
对标记应用 overflow:hidden”样式,也可以清除浮动对该标记的影响。这种方式弥补了空标记清除浮动的不足。
需要注意的是,在使用“ overflow: hidden”样式清除浮动时,一定要将该样式写在被影响的标记中。

3)使用after伪对象清除浮动
使用 after伪对象也可以清除浮动,但是该方法只适用于IE8及以上版本浏览器和其他非IE浏览器。使用 after伪对象清除浮动时需要注意以下两点。
·必须为需要清除浮动的标记伪对象设置“height:0;”样式,否则该标记会比其实际
高度高出若干像素。
·必须在伪对象中设置 content属性,属性值可以为空,如“content:””;”。
 
以上我们介绍了css中清除浮动的方法,如果想系统学习web前端知识,请点击页面咨询按钮了解详细web前端课程信息。


推荐了解:
大数据培训

javaee

python

web

ui

cloud

test

c

netmarket

pm

Linux

movies

robot

uids

北京校区

    14天免费试学

    基础班入门课程限时免费

    申请试学名额

    15天免费试学

    基础班入门课程限时免费

    申请试学名额

    15天免费试学

    基础班入门课程限时免费

    申请试学名额

    15天免费试学

    基础班入门课程限时免费

    申请试学名额

    20天免费试学

    基础班入门课程限时免费

    申请试学名额

    8天免费试学

    基础班入门课程限时免费

    申请试学名额

    20天免费试学

    基础班入门课程限时免费

    申请试学名额

    5天免费试学

    基础班入门课程限时免费

    申请试学名额

    0天免费试学

    基础班入门课程限时免费

    申请试学名额

    12天免费试学

    基础班入门课程限时免费

    申请试学名额

    5天免费试学

    基础班入门课程限时免费

    申请试学名额

    5天免费试学

    基础班入门课程限时免费

    申请试学名额

    10天免费试学

    基础班入门课程限时免费

    申请试学名额