CSS清除浮动第一些方法

清除浮动的方法：常用第5种

第1种 ：给父级也加浮动（这种情况当父级margin:0 auto;时不居中

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

.box{ width:300px;margin:0 auto;border:10px solid #000; float:left;}

.div{ width:200px;height:200px;background:red;float:left;}

/*

清浮动

1.给父级也加浮动(不居中了)

*/

</style>

</head>

<body>

<div class="box">

<div class="div"></div>

</div>

</body>

</html>

第2种  ：给父级加display:inline-block;(同方法1，不居中。只有IE6,7居中)

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

.box{ width:300px;margin:0 auto;border:10px solid #000; display:inline-block;}

.div{ width:200px;height:200px;background:red;float:left;}

/*

清浮动

1.给父级也加浮动

2.给父级加display:inline-block

*/

</style>

</head>

<body>

<div class="box">

<div class="div"></div>

</div>

</body>

</html>

第3种 在浮动元素下加<div class="clear"></div>

.clear{ height:0px;font-size:0;clear:both;}但是在ie6下，块元素有最小高度，即当height<19px时，默认为19px，解决方法：font-size:0;或overflow:hidden;

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

.box{ width:300px;margin:0 auto;border:10px solid #000;}

.div{ width:200px;height:200px;background:red;float:left;}

.clear{ height:0px;font-size:0;clear:both;}

/*

清浮动

1.给父级也加浮动

2.给父级加display:inline-block

3.在浮动元素下加<div class="clear"></div>

.clear{ height:0px;font-size:0;clear:both;}

*/

</style>

</head>

<body>

<div class="box">

<div class="div"></div>

<div class="clear"></div>

</div>

</body>

</html>

第4种  在浮动元素下加<br clear="all">

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

.box{ width:300px;margin:0 auto;border:10px solid #000;}

.div{ width:200px;height:200px;background:red;float:left;}

/*

清浮动

1.给父级也加浮动

2.给父级加display:inline-block

3.在浮动元素下加<div class="clear"></div>

.clear{ height:0px;font-size:0;clear:both;}

4.在浮动元素下加<br clear="all"/>

*/

</style>

</head>

<body>

<div class="box">

<div class="div"></div>

<br clear="all"/>

</div>

</body>

</html>

第5种.给浮动元素父级加{zoom:1;}

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

.box{margin:0 auto;border:10px solid #000;}

.div{ width:200px;height:200px;background:red;float:left;}

.clear{zoom:1;}

.clear:after{content:""; display:block;clear:both;}

/*

清浮动

1.给父级也加浮动

2.给父级加display:inline-block

3.在浮动元素下加<div class="clear"></div>

.clear{ height:0px;font-size:0;clear:both;}

4.在浮动元素下加<br clear="all"/>

5. 给浮动元素的父级加{zoom:1;}

:after{content:""; display:block;clear:both;}

**在IE6，7下浮动元素的父级有宽度就不用清浮动

haslayout 根据元素内容的大小 或者父级的父级的大小来重新的计算元素的宽高

display: inline-block

height: (任何值除了auto)

float: (left 或 right)

width: (任何值除了auto)

zoom: (除 normal 外任意值)

*/

</style>

</head>

<body>

<div class="box clear">

<div class="div"></div>

</div>

</body>

</html>

.html清除浮动的6种方法示例

作者： 字体：[增加 减小] 类型：转载 时间：2013-11-15 我要评论

本文讲了6种清除HTML元素浮动的方法供大家参考使用，具体下看下文

..使用display：inline-block会出现的情况：

1.使块元素在一行显示

2.使内嵌支持宽高

3.换行被解析了

4.不设置的时候宽度由内容撑开

5.在IE6,7下步支持块标签

由于inline-block属性换行的时候被解析（有间隙）故解决方法使用浮动float:left/right

使用浮动时出现的情况：

1.使块元素在一行显示

2.使内嵌元素支持宽高

3.不设置不宽高的时候宽度由内容撑开

4.换行不被解析（故使用行内元素的时候清除间隙的方法可以使用浮动）

5.元素添加浮动，会脱离文档流，按照指定的一个方向移动，直到碰到父级的边界或者另一个浮动元素停止（文档流是文档中可显示对象在排列时所占用的位置）

复制代码 代码如下:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

div,span{height:100px;background:red;border:1px solid #000; float:left;}

/*

inline-block

1.使块元素在一行显示

2.使内嵌支持宽高

3.换行被解析了

4.不设置宽度的时候宽度由内容撑开

5.在IE6,7下不支持块标签

浮动:

1.使块元素在一行显示

2.使内嵌支持宽高

3.不设置宽度的时候宽度由内容撑开

*/

</style>

</head>

<body>

<div class="div1">div1</div>

<div class="div2">div2</div>

<span class="span1">span1</span>

<span class="span2">span2</span>

</body>

</html>

下面的代码只有box1浮动，则box1，box2重叠一起。两者都浮动就不会重叠

复制代码 代码如下:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

.box1{ width:100px;height:100px;background:red; float:left;}

.box2{ width:200px;height:200px;background:blue; /* float:left;*/}

</style>

</head>

<body>

<div class="box1"></div>

<div class="box2"></div>

</body>

</html>

清浮动的方法：

1.给父级也加浮动（这种情况当父级margin:0 auto;时不居中）

复制代码 代码如下:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

.box{ width:300px;margin:0 auto;border:10px solid #000; float:left;}

.div{ width:200px;height:200px;background:red;float:left;}

/*

清浮动

1.给父级也加浮动(不居中了)

*/

</style>

</head>

<body>

<div class="box">

<div class="div"></div>

</div>

</body>

</html>

2.给父级加display:inline-block;(同方法1，不居中。只有IE6,7居中)

复制代码 代码如下:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

.box{ width:300px;margin:0 auto;border:10px solid #000; display:inline-block;}

.div{ width:200px;height:200px;background:red;float:left;}

/*

清浮动

1.给父级也加浮动

2.给父级加display:inline-block

*/

</style>

</head>

<body>

<div class="box">

<div class="div"></div>

</div>

</body>

</html>

3.在浮动元素下加<div class="clear"></div>

.clear{ height:0px;font-size:0;clear:both;}但是在ie6下，块元素有最小高度，即当height<19px时，默认为19px，解决方法：font-size:0;或overflow:hidden;

复制代码 代码如下:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

.box{ width:300px;margin:0 auto;border:10px solid #000;}

.div{ width:200px;height:200px;background:red;float:left;}

.clear{ height:0px;font-size:0;clear:both;}

/*

清浮动

1.给父级也加浮动

2.给父级加display:inline-block

3.在浮动元素下加<div class="clear"></div>

.clear{ height:0px;font-size:0;clear:both;}

*/

</style>

</head>

<body>

<div class="box">

<div class="div"></div>

<div class="clear"></div>

</div>

</body>

</html>

4.在浮动元素下加<br clear="all">

复制代码 代码如下:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

.box{ width:300px;margin:0 auto;border:10px solid #000;}

.div{ width:200px;height:200px;background:red;float:left;}

/*

清浮动

1.给父级也加浮动

2.给父级加display:inline-block

3.在浮动元素下加<div class="clear"></div>

.clear{ height:0px;font-size:0;clear:both;}

4.在浮动元素下加<br clear="all"/>

*/

</style>

</head>

<body>

<div class="box">

<div class="div"></div>

<br clear="all"/>

</div>

</body>

</html>

5.给浮动元素父级加{zoom:1;}

:after{content:""; display:block;clear:both;}

复制代码 代码如下:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

.box{margin:0 auto;border:10px solid #000;}

.div{ width:200px;height:200px;background:red;float:left;}

.clear{zoom:1;}

.clear:after{content:""; display:block;clear:both;}

/*

清浮动

1.给父级也加浮动

2.给父级加display:inline-block

3.在浮动元素下加<div class="clear"></div>

.clear{ height:0px;font-size:0;clear:both;}

4.在浮动元素下加<br clear="all"/>

5. 给浮动元素的父级加{zoom:1;}

:after{content:""; display:block;clear:both;}

**在IE6，7下浮动元素的父级有宽度就不用清浮动

haslayout 根据元素内容的大小 或者父级的父级的大小来重新的计算元素的宽高

display: inline-block

height: (任何值除了auto)

float: (left 或 right)

width: (任何值除了auto)

zoom: (除 normal 外任意值)

*/

</style>

</head>

<body>

<div class="box clear">

<div class="div"></div>

</div>

</body>

</html>

第6种.给浮动元素父级加overflow:auto;

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

.box{ width:300px;border:1px solid #000;overflow:auto;}

.div1{ width:260px;height:400px;background:Red;float:left;}

</style>

</head>

<body>

<div class="box">

<div class="div1"></div>

</div>

</body>

</html>

时间： 2024-12-29 10:42:06

CSS清除浮动第一些方法的相关文章

css 清除浮动的各种方法

1.为什么要清除浮动 在网页中,DIV一般都是嵌套的,外面称为窗口,里面的DIV存放内容,如果不浮动的话,如下面这段代码<div style=”background:#ccc;”> <div style=”float:left; width:30%; height:40px;background:#333; “> Content here</div> </div>本来我们期望看到的是,外面背景为#ccc的层包含了里面背景为#333的层,但实际上,外面的层在显

前端布局之CSS清除浮动的六种方法

在网页开发过程中经常会用到各种浮动,此时就需要及时清除浮动,不然会对后面的布局造成影响. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .outer{ border: 1px solid black; background: yellow; width:30

css清除浮动4种方法

为什么浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性. 而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了. 解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问题. 1,父级div定义 height <style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/heig

CSS清除浮动的各种方法

1.在浮动元素后面增加<br/>标签: <br/>标签有自带的清除浮动属性: 2.在浮动元素后面增加一个清除浮动层: <div> <div style="float:left"></div> <div style="float:left"></div> <div style="clear:both"></div> </div>

css清除浮动各方法与原理

说到清除浮动的方法,我想网络上应该有不下7,8的方法,介绍这些方法之前,想下为什么清除浮动? 再次回到float这个属性,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列. 这就产生了一个问题:浮动元素所在父元素不会自动伸长以便闭合浮动元素,任其“红杏出墙”,这显然不符合我们的“伦理观”,所以要“抓回来”施以家法:那么如何抓呢? 提起css,提起(x)html,首先进入脑海的是楚楚动人的页面吗?不,首先应该是这楚楚动人的页面的背后的“楚楚冻人

我的第一篇博客--css 清除浮动

第一篇博客,请大家多多指教! 今天我浅谈对网页编写css中清除浮动几种方法,众所周知在网页编写中,在遇到内容左右布局时,我们必须要使用浮动才能使元素左右排列,而这时 当我们需在下面的网页中继续布局时,浮动就会给下面的元素带来影响,就需要使用清除浮动了. 清除浮动作为每一个Web前端必须掌握的技能,在逆战班学习中我想说说我对不同清除浮动方法的理解和使用方式,下面来介绍一下几种清除浮动的 方法:1.当解决上下排列的情况时,利用clear清除float,具体值为:right.left.both:我在使

css清除浮动的方法总结

在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了.解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问

css清除浮动float的三种方法总结【转载自https://my.oschina.net/leipeng/blog/221125】

摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer">     <div class="div1">1</div>     <div class="div2">2</div>     <div class="div3

CSS清除浮动大全共8种方法

清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了.解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问题. 下面总结8种清除浮动的方法(测试已通过 ie chrome firefox opera,后面三种方法只做了解就可以了): 1,父级div定义 height 代码如下