清除float浮动的几种方法

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
float主要流行与页面布局,然后没有使用后没有清除浮动,就会后患无穷,下面是清除float的几种方法。

操作方法

  • 01

    第一种方法:使用空标签清除浮动 <ul > <li>AAA</li> <li>BBB</li> <li>CCC</li> <br style="clear:both"> </ul>

  • 02

    第二种方法:使用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>

  • 03

    第三种方法:使用after伪对象清除浮动 after伪对象非IE浏览器支持,所以并不影响到IE/WIN浏览器。具体写法可参照以下示例。使用中需注意以下几点。 一、该方法中必须为需要清除浮动元素的伪对象中设置height:0,否则该元素会比实际高出若干像素; 二、content属性是必须的,但其值可以为空,蓝色理想讨论该方法的时候content属性的值设为".", <style type="text/css"> .listinfo:after{display:block;clear:both;content:""; visibility:hidden;height:0;} c< class="listinfo">/ <li>AAA</li> <li>BBB</li> <li>CCC</li> </ul>

(0)

相关推荐

  • Word2010添加和清除下划线的几种方法图解

    word文档中常会碰到word自动给网络地址加下划线,点击即可打开相关网站.但有些朋友不喜欢下划线,那么我们有那些方法可以清除下划线,下面小编就为大家介绍Word2010添加和清除下划线的几种方法,来 ...

  • 思科路由器清除配置信息的两种方法介绍

    对于网络设备来说,清除配置信息是防止黑客轻松地连接访问公司网络的最佳方法。在对思科路由器进行清理时,有两种不同的方法可供选择,而它们通常用于不同的方面: 一、知道路由器的密码,相关步骤如下所示: (1 ...

  • win7下清除arp缓存避免被arp攻击和arp欺骗的两种方法

    上网老是掉线,有时甚至网都连不上!为毛!很可能电脑被黑啦!为了避免被arp攻击和arp欺骗,定时清理arp缓存列表是个不错的选择。如何清除arp缓存呢?下面小编就给大家介绍清除arp缓存的两种方法。 ...

  • CSS清除浮动 个人搜集的方法经验

    一般是一个盒子里使用了CSS float浮动属性,导致父级对象不能被撑开 所以要清除浮动 操作方法 01 方法一    overflow: hidden; 父元素加上 overflow: hidden ...

  • XP无法清除DNS缓存的三种解决方法

    XP无法清除DNS缓存的三种解决方法 方法一:用修复本地连接刷新DNS 1.从简到难,先用最简单的方法刷新一下DNS缓存,就是用修复本地连接的方法,在桌面任务栏的右下角,右键点击本地连接图标,在弹出的 ...

  • win7系统如何清除360浏览器缓存 win7清除360浏览器缓存的三种方法

    windwos操作系统自带IE浏览器,但是部分用户觉得不是很好用,选择下载第三方浏览器,现在网上浏览器种类很多种,比如有360浏览器.百度浏览器.搜狗浏览器等等.很多用户在自己ghost win7系统 ...

  • Bluestacks怎么清理缓存垃圾?蓝叠安卓模拟器清除缓存的2种方法

    使用bluestacks运行安卓应用所产生的垃圾.缓存怎么清理?BlueStacks蓝叠安卓模拟器是全球唯一一个拥有核心技术专利的安卓模拟器及引擎,他可以让各位手游玩家在电脑上畅玩手游.但是,Blue ...

  • 三种清除Win 7的Jumplist历史记录方法

    Win 7任务栏上的Jumplist菜单功能,即任务栏跳转列表,一方面给我们提供查看最近浏览记录,另方面也在不经意中泄露了你的隐私,该怎么清除Win 7的Jumplist历史记录呢,下面笔者将给大家介 ...

  • word文档怎么清除顽固的文字背景? word删除文档背景的两种方法

    在网上下载了一篇文章,可是在排版的时候让人很头疼,在文字的斜面出现了灰色的背景,怎么呢取也去不掉,反复试验,终于去掉了头疼的文字背景. 方法一: 1.在打开的Word文档中选择好有背景的文字,单击菜单 ...