注册 | 登陆
您的位置:阿里西西 > 前端技术 > CSS教程 > 详细内容

通过CSS清除网页页面中的浮动层几种方法分享

  稿源:本站整理   2018-09-04   点击:   撤稿纠错
本站收录这篇文章通过CSS清除网页页面中的浮动层几种方法分享,详细解说文章中相关CSS 浮动层 技术与知识,欢迎能给大家一些在这方面的支持和帮助!下面是详细内容:

介绍通过CSS清除网页页面中的浮动层几种方法分享。

方法一(使用空标签带clear属性)

标签可以是div br hr

在浮动元素后使用一个空元素如<p class="clear"></p>,并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。

优点:简单,代码少,浏览器兼容性好。

缺点:需要添加大量无语义的html元素,代码不够优雅,后期不容易维护。

在浮动元素下加<p class="clear"></p> .clear{ height:0px;font-size:0;clear:both;},但是在ie6下,块元素有最小高度,即当height<19px时,默认为19px

解决方法:font-size:0;或overflow:hidden; 在浮动元素下加<br clear="all">用以清除浮动

方法二(给浮动元素的父元素添加overflow属性)解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。

使用该方法是只需在需要清除浮动的元素中定义CSS属性:overflow:auto

overflow:auto;是让高度自适应,zoom:1;是为了兼容IE6,也可以用height:1%;的方式解决,

注意:zoom不符合W3C标准。overflow:hidden也可以实现。

<ul style="overflow:auto;zoom:1>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>

方法三:(给浮动的元素的容器添加浮动,即为父级添加float来清除浮动)

<div style="float: right;background-color: #1a1a1a;">
   <div style="float: right;width: 300px;height: 300px;background-color: #2a85a0;">
 
   </div>
   <div style="width: 500px;height: 200px;background-color: #8a6d3b">
 
   </div>
</div>

给浮动元素的容器也添加上浮动属性即可清除内部浮动

缺点:会使其整体浮动,影响布局,不推荐使用。

方法四: (使用after伪对象清除浮动)

after 伪元素(注意这不是伪类,而是伪元素,代表一个元素之后最近的元素)和 IEhack ,可以完美兼容当前主流的各大浏览器,这里的 IEhack 指的是触发 hasLayout。

通过after伪元素实现元素末尾添加一个看不见的块元素(Block element)清理浮动。

通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格""或点".",并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器,要给clearfix这个class添加一条zoom:1;触发haslayout。

after伪对象非IE浏览器支持,所以并不影响到IE/WIN浏览器。具体写法可参照以下示例。使用中需注意以下几点。

一、该方法中必须为需要清除浮动元素的伪对象中设置height:0,否则该元素会比实际高出若干像素;

二、content属性是必须的,但其值可以为空,讨论该方法的时候content属性的值设为".",

<style type="text/css"> 
.listinfo:after{
      display:block;
      clear:both;
      content:"";  
      visibility:hidden;
      height:0;
} 
<ul class="listinfo">
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>

方法五:使用邻接元素处理

什么都不做,给浮动元素后面的元素添加clear属性。

方法与添加一个空标签类似,只是此处用浮动元素紧邻的元素

 

使用情况:

在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式;

在小模块如ul里使用overflow:hidden;(留意可能产生的隐藏溢出元素问题);

如果本身就是浮动元素则可自动清除内部浮动,无需格外处理;

正文中使用邻接元素清理之前的浮动。

使用相对完美的:after伪元素方法清理浮动,文档结构更加清晰;

BUG修正:

(1)、双倍边距bug处理 IE6 时,另一个需要记住的事情是,如果在和浮动方向相同的方向上设置外边距(margin),会引发
双倍边距。

快速修正:给浮动设置 display:inline; 而且不用担心,它依然是块级元素。
(2)、3像素间距是指挨着浮动元素的文本会神奇的被踢出去3像素,好像浮动元素的周围有一个奇怪的力场一样。

快速修正:在受影响的文本上设置宽度或高度。
(3)、IE7 中,底边距 bug是当浮动父元素有浮动子元素时,这些子元素的底边距会被父元素忽略掉。

快速修正:用父元素的底内补白(padding)代替。

通过CSS清除网页页面中的浮动层几种方法分享文章就讲到这里,欢迎浏览本站的其它内容,点击这里返回首页

更多关于 CSS 浮动层 的文章
相关阅读

相关排行总榜

网页教程

网站运营

特效排行

教你如何使用js+CSS写出类似FLASH动画的网
一款CSS3制作的带尖角的按钮实例代码
目前主流浏览器对于HTML5与CSS3的支持情况
全面剖析前端Ajax技术原理及知识
分享一个HTML5 + JavaScript实现Flash动画
用PHOTOSHOP把美女头画像制作成漂亮的仿手
淘宝网及新浪网等几大官方IP查询API接口地
用Photoshop制作淘宝大促双十一电商促销宣
用HTML5+css3制作HTML5验证的网页表单
通过html5代码实现在网页中插入和播放mp4
如何让您的微信公众号内容快速增加阅读量
网站用户界面设计(网页设计)命名规范
分享一些企业微信营销推广的技巧与经验
可以借鉴和学习的小米模式4大经验要素
SEO优化中网站title标题优化总结及经验分
为什么说建站要从网站用户忠诚度着手,知
一个优秀的SEM进行百度搜索推广账号架构经
谈谈从了解用户开始互联网推广的营销策略
谈谈新手运营网站如何做好网站的广告位投
清理您网站上的黑链的几个招数
JS制作循环上下左右平移转圈的图层特效
原生js写的贪食蛇网页版小游戏特效代码,
用CSS3实现的addidas阿迪达斯标志LOGO特效
HTML5打造的酷炫3D 360度图片立体浏览特效
通用canvas代码实现的JS画圆圈动画特效代
通过HTML5+SVG制作奔跑的小马驹动画特效
jquery实现拖拽进度条并显示百分比的特效
用HTML5+canvas代码绘制的星空月亮图案特
简单实用的纯CSS实现的横向多级导航特效代
原生JS写的一个书架式的图片缩放滚动展示