网页浮动实际上是css中的一种应用方式,这个基础的原理还是要理解清楚的,float属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在CSS中,任何元素都可以浮动。浮动元素将会是生成一个块级框。
浮动元素它是脱离文档流,并且是不占据空间的,浮动元素碰到包含它的边框或者浮动元素的边框停留,下面我们来学习一下清除浮动的技巧,有在学习Web开发的朋友们可以关注参考一下。
第一:可以使用空标签清除浮动。
使用这种方法是在所有浮动标签后面添加一个空标签定义cssclear:both.那么你会发现它的弊端就是增加了无意义标签。
第二:使用overflow方式
在设计的时候也是可以给包含浮动元素的父标签添加css属性overflow:auto;zoom:1;zoom:1它的作用是用于兼容IE6。
第三:可以是使用after伪对象清除浮动。
使用该方法只适用于非IE浏览器。具体写法可以参考下面的一个例子,在使用中需注意以下几点。第一、这种方法中必须是为需要清除浮动元素的伪对象中设置height:0,否则该元素会比实际高出若干像素;
重点来了,那么浮动元素引起的问题和解决办法?
一般浮动元素引起的问题如下:
(1)当父元素的高度无法被撑开,这也将会是影响与父元素同级的元素。
(2)如果是与浮动元素同级的非浮动元素(内联元素)它也会是跟随在后面。
(3)如果不是第一个元素浮动,那么这个元素之前的元素也需要浮动,否则就会影响页面显示的结构。
具体的一个解决方法:
如果是使用CSS中的clear:both;属性来清除元素的浮动,将会是可解决2、3问题,对于第一个问题的话,可以是添加下面的一个样式,然后是给父元素添加clearfix样式:
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
清除浮动的几种方法(可参考一下)
1,使用额外标签法
<div style="clear:both;"></div>
(它的缺点:该办法会增加额外的标签使html结构看起来并没有那么的简洁)
2,可以使用after伪类
css代码
#parent:after{content:".";height:0;visibility:hidden;display:block;clear:both;}
3,在浮动外部元素
4,可以设置overflow为hidden或者auto
总的来说,设置清除浮动的方式还算是有比较多种的,在实际的设计需求中,可以是根据需要来进行方法的选择,浮动是一个比较重要的知识点,也是在网站中常见的一个现象,作为web开发是需要掌握的一个方法。