css 两种清除浮动经典实例代码

一、使用空标签清除浮动
<style type=”text/css”>
<!–
    *{margin:0;padding:0;}
    body{font:36px bold; color:#f00; text-align:center;}
    #layout{background:#ff9;}
    #left{float:left;width:20%;height:200px;background:#ddd;line-height:200px;}
    #right{float:right;width:30%;height:80px;background:#ddd;line-height:80px;}
    .clr{clear:both;}
–>
</style>
<div id=”layout”>
    <div id=”left”>left</div>
    <div id=”right”>right</div>
    <p class=”clr”>
</div>

空标签可以是div标签,也可以是p标签。我习惯用<p>,够简短,也有很多人用<hr>,只是需要另外为其清除边框,但理论上可以是任何标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清楚浮动,并为其定义css代码:clear:both。此方法的弊端在于增加了无意义的结构元

使用overflow属性
有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义css属性:overflow:auto,即可!”zoom:1′用于兼容ie6。

<style type=”text/css”>
<!–
    *{margin:0;padding:0;}
    body{font:36px bold; color:#f00; text-align:center;}
    #layout{background:#ff9;overflow:auto;zoom:1;}
    #left{float:left;width:20%;height:200px;background:#ddd;line-height:200px;}
    #right{float:right;width:30%;height:80px;background:#ddd;line-height:80px;}
–>
</style>
<div id=”layout”>
    <div id=”left”>left</div>
    <div id=”right”>right</div>
</div>

 

时间: 2024-09-23 06:04:47

css 两种清除浮动经典实例代码的相关文章

php两种无限分类方法实例

  这篇文章主要介绍了php两种无限分类方法实例,本文给出了递归方法和非递归方法实现的无限分类实例,需要的朋友可以参考下 一.递归方法 复制代码 代码如下: $items = array( array('id'=>1,'pid'=>0,'name'=>'一级11'), array('id'=>2,'pid'=>0,'name'=>'一级12'), array('id'=>3,'pid'=>1,'name'=>'二级21'), array('id'=&g

Android 两种启动模式的实例详解

Android 两种启动模式的实例详解 Intent的FLAG_ACTIVITY_CLEAR_TOP和FLAG_ACTIVITY_REORDER_TO_FRONT Activity的两种启动模式:FLAG_ACTIVITY_CLEAR_TOP和FLAG_ACTIVITY_REORDER_TO_FRONT 1. 如果已经启动了四个Activity:A,B,C和D.在D Activity里,我们要跳到B Activity,同时希望C finish掉,可以在startActivity(intent)里

两种js获取当前域名代码

 今天给各位朋友介绍两种js获取当前域名  代码如下 //获取当前域名 1.window.location.host; 2.document.domain; //获取当前页面地址 url = window.location.href;   例子  代码如下 <script language="javascript"> //获取域名 host = window.location.host; host2=document.domain; //获取页面完整地址 url = win

java-请问:用Java代码中实现在一个类编写两种方法,下面的代码接下来怎么办呢?谢谢!

问题描述 请问:用Java代码中实现在一个类编写两种方法,下面的代码接下来怎么办呢?谢谢! 解决方案 啥东西,写两个方法,那你就写两个函数就行了,什么怎么办 解决方案二: 你的类里不就2个方法了吗

css两种动态显示星星等级的比较(一星、两星、三星、四星、五星)

原文:css两种动态显示星星等级的比较(一星.两星.三星.四星.五星) 以下是显示后的图片,相信在很多网站上都能看到这种效果,目前我知道两种实现方式 1.background-position加上一张图片     图片:http://www.brookstone.com/webassets/pwr/engine/images/stars.gif      1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <link rel="

php七种缓存控制输出实例代码

php教程七种缓存控制输出实例代码 可以根据缓存开启与否,有如下几种不同的写法: 注:以下代码都未考虑ie缓存必须大于256字节才输出的问题,如在ie下测试,请在代码开始加一句:"echo str_repeat(' ',256)" 写法1: output_buffering = off implicit_flush=off for($i=0;$i<10;$i++) {    echo $i.'<br />';    flush();    sleep(1); } 写法

css清除浮动方法和代码

  对于一个前端设计者,经常用CSS设计页面,对于清除浮动似乎是一个再基础不过的技巧了,但是清除浮动也是有很多方法和代码的,今天分享一个流行且在很多大项目上已被采用的CSS清除浮动的代码. 这个代码来源于positioniseverything ,通过after伪类:after和IEhack来实现,完全兼容当前主流浏览器. 上述代码是一种标准模式,效果和兼容性都是相当出色的,不过有些朋友总担心代码太多所造成的影响,可以这样优化一下,不影响清除效果,也是很不错的:

详解Grunt插件之LiveReload实现页面自动刷新(两种方案)_php实例

方案一:grunt-livereload + Chrome Plug-in 优点:安装.配置简单方便. 缺点:需要配合指定的浏览器插件(Firefox也有相关插件,IE么你懂的). 1. 需要安装2个插接件:grunt-contrib-watch.connect-livereload 执行命令: 复制代码 代码如下: npm install --save-dev grunt-contrib-watch connect-livereload 2. 安装浏览器插件:Chrome LiveReload

JavaScript中两种链式调用实现代码_javascript技巧

一.方法体内返回对象实例自身(this) 复制代码 代码如下: function ClassA(){ this.prop1 = null; this.prop2 = null; this.prop3 = null; } ClassA.prototype = { method1 : function(p1){ this.prop1 = p1; return this; }, method2 : function(p2){ this.prop2 = p2; return this; }, metho