下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

网页浮动的理解及解决的办法

作者:课课家教育     来源: http://www.kokojia.com点击数:1620发布时间: 2017-02-27 11:00:28

标签: 网页设计网页浮动web开发

Web开发

  我们看到的网页浮动实际上是css中的一种应用方式,这个基础的原理还是要理解清楚的,float属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在CSS中,任何元素都可以浮动。浮动元素将会是生成一个块级框。

  浮动元素它是脱离文档流,并且是不占据空间的,浮动元素碰到包含它的边框或者浮动元素的边框停留,下面我们来学习一下清除浮动的技巧,有在学习Web开发的朋友们可以关注参考一下。

网页浮动的理解及解决的办法_网页设计_网页浮动_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开发是需要掌握的一个方法。

赞(10)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程