教育行业A股IPO第一股(股票代码 003032)

全国咨询/投诉热线: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前端课程信息。


推荐了解:
大数据培训

0 分享到:
和我们在线交谈!