CSS（三）解析盒子模型的浮动

时间：2017-06-24 21:50:20 阅读：305 评论：0 收藏：0 [点我收藏+]

标签：元素浮动 text width 漂浮改变 article div post

上篇博客遗留了浮动和定位两个问题，仅仅是对他们进行了简单的描写叙述，今天细致透透他们的底细，此篇为浮动篇。

浮动在这个CSS排版流行的年代发挥着越来越关键的数据，如同aline对定位网页元素的重要性一样。但它比aline更加功能强大。

float主要功能是帮助对象在网页中对齐的。通过不同的命令使对象左右浮动，直到遇到border、padding、margin或其它对象边缘为止。别看这简单的浮动，却能够为我们的排版设计出各种靓丽的风格，以下介绍几种。

我把它们归为了下面两大类：普通浮动和嵌套浮动。

普通浮动又分为none；left和right三种。

1、float：none。默认情况下，都是none的效果。这时的网页元素将依照他们自身的出现方式排列，通常是靠边对齐，依照文本流运行先后顺序排列。

代码：

<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>不设浮动属性的情况</title>
<style type="text/css">
<!--
* {margin:0px; padding:0px;}
body {margin:10px; font-size:14px;}
#box {background-color: #66CCFF; height: 100px; width: 300px; border: 1px solid #66CCCC; text-align: center; line-height:100px; float:none;/*此对象不浮动，此时对象不同意有文本流围绕*/}
-->
</style>
</head>

<body>
<div id="box">没有浮动</div>
<p>这就是我们介绍的没有设置浮动，即默认情况下的浮动效果</p>
</body>
</html></span>

2、float：left。

此时盒子浮动到左边。而文字却跑到了盒子右边！

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>对象左浮动</title>
<style type="text/css">
<!--
* {margin:0px; padding:0px;}
body {margin:10px; font-size:14px;}
#box {background-color: #66CCFF; height: 100px; width: 300px; border: 1px solid #66CCCC; text-align: center; line-height:100px; float:left;/*此对象左浮动，此时对象右边同意有文本流围绕*/}
-->
</style>
</head>

<body>
<div id="box">我如今左浮动（float:left）</div>
<p>如今是左浮动啦，看看是不是文字跑到了图片右边？？？</p>
</body>
</html>

3、float：right。盒子浮动到右边，文字诡异地跑到了左边！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>对象左浮动</title>
<style type="text/css">
<!--
* {margin:0px; padding:0px;}
body {margin:10px; font-size:14px;}
#box {background-color: #66CCFF; height: 100px; width: 300px; border: 1px solid #66CCCC; text-align: center; line-height:100px; float:left;/*此对象左浮动。此时对象右边同意有文本流围绕*/}
-->
</style>
</head>

<body>
<div id="box">我如今左浮动（float:left）</div>
<p>如今是右浮动啦，看看是不是文字跑到了图片左边？？？</p>
</body>
</html>

好了，说完了最简单的，以下介绍下嵌套浮动。

1、负边界浮动：浮动对象会有负边界的情况，也就是浮动对象可能会漂浮到其所在父对象外边去。这有点像绝对定位的效果，但又与绝对定位不同，它还能影响它所在地方的文本流，请用标准浏览器FF看以下代码效果：

<span style="color:#000000;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>浮动对象有负边界的情况[请用标准浏览器查看]</title>
<style type="text/css">
<!--
* {margin:0px; padding:0px;}
body {margin:50px; font-size:12px;}
#box {background-color: #66CCFF;  height: 100px; width: 300px; border: 1px solid #66CCCC; }
#box2 {background-color: #33CC99;margin:-10px 10px 0px 0px; height:20px; width: 100px; border: 1px solid #336666;float:right;}
-->
</style>
</head>

<body>
<div id="box">
  <div id="box2">负边界浮动效果怎样？</div>
右上方小盒子边界是margin:-10px 10px 0px 0px;，folat:right，这个效果还不错吧，这可不是用相对、或者绝对定位做出来的，部分文字还有围绕效果。假设在上面小盒子输标题，在这大盒子内部输内容，大家能够举一反三，多做出另外相似的效果来。</div>
</body>
</html>
</span>

2、浮动子盒子宽度>常规父盒子。假设较宽的子盒子设置了浮动，在较窄的常规父盒子中会呈现出什么样的效果？

答案：浮动的子盒子不会影响到父盒子的宽度，超过的部分会越到父盒子外面。但不会影响到外边文本流的移动。而是覆盖在外边文字上边的。请用标准浏览器FF看以下代码效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>子级元素宽大于父级的元素中宽的情况[请用标准浏览器查看]</title>
<style type="text/css">
<!--
* {margin:0px; padding:0px;}
body {margin:10px; font-size:12px;}
#box {background-color: #66CCFF; margin-left:200px; height: 100px; width: 300px; border: 1px solid #66CCCC; float:left;}
#box2 {background-color: #33CC99; height: 30px; width: 500px; border: 1px solid #336666;float:right;}
-->
</style>
</head>

<body>
<div id="box">我如今左浮动（float:left）。我的宽小于子盒子。但它不会把我撑开，同一时候我设置了一定的左边界，目的是方便看到子盒子越出去的情况
  <div id="box2">我是子盒子，我的宽比父级要大。同一时候我的浮动是folat:right,所以右边靠在父级盒子的右边。而宽于父盒子的部分在大盒子左边越出。
</div>
</div>
<p>此时，是子盒子宽度大于父盒子</p>
</body>
</html>

3、浮动子盒子高度>常规父盒子。

同上，浮动的子盒子高度若是超过了常规的父盒子。我们又想让父盒子能自己主动适应子盒子高度的变化，该怎么办？

答案：我们能够在父级内。浮动子盒子后边清除浮动，即<div style="clear:both"></div>。请用标准浏览器FF看以下代码效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>高度不能自适应[请用标准浏览器查看]</title>
<style type="text/css">
<!--
* {margin:0px; padding:0px;}
body {margin:5px; font-size:12px;}
.box {background-color: #66CCFF;width: 200px;border: 1px solid #66CCCC;}
.box2 {background-color: #33CC99;margin-right:20px; width: 100px; border: 1px solid #336666;float:left;/*删掉这浮动也能够让父级高度自适应*/}
-->
</style>
</head>

<body>
<div class="box">我是父盒子,我的高没有设定,可是我的子盒子高过我时,在标准浏览器中我的高不能自适应。
  <div class="box2">
这个盒子是小盒子，它没有设定高度属性，其高度是随里面的文字的加多而自己主动升高的，可是当它的高度超过父级盒子时，在标准浏览器中并没有把父级撑高。这样的情况与上面讲的子级宽度超过父级的元素中是一样的。可是这样的高度自适度常是我们须要的，怎样做到让高度自适应呢，常见的办法是在父级内增加下面样式：<div style="clear:both"></div>清除掉与其同级小盒子的浮动。

  </div>
<!--<div style="clear:both"></div>去除这里的凝视再看看，这样父级盒子的高级就能够自适应了-->
</div>
</body>
</html>

注意：设置浮动对象是，一定要为其设定一个宽度，不然会有意想不到结果。即没有设定宽度而又没有内容的对象浮动后宽度会趋近于0。

以下顺带着说一下Clear吧。即清除的应用，他们二者是紧密相关的。

有时候我们浮动会带给我们额外的困扰，如牛腩新闻公布系统中的页脚块footer。随着内容区浮动的应用会使其跟着左浮动跑到右边，而我们想让其单独作为一行出如今最下边，这时就不得不用一个clear:both了。

另外，我们还能够利用它做出不同的浮动效果。如我们能够让一段文本流两遍出现浮动或者横排变竖排（清除左浮动就可以）：

例：一段文本流两遍出现浮动。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>让对象两边都有浮动对象存在</title>
<style type="text/css">
<!--
* {margin:0px; padding:0px;}
body {margin:10px;font-size:15px;}
.box1 {background-color: #33CC99; height:300px; width: 100px; border: 1px solid #336666;float:left;}
.box2 {background-color: #33CC99; height:300px; width: 100px; border: 1px solid #336666;float:right;}
#clearF {
	clear:none;/*试着改变清除方式left/right/both再看看执行效果*/
	background-color: #66CCFF;
}
-->
</style>
</head>

<body>
<div class="box1"></div>
<p>　　有时候我们浮动会带给我们额外的困扰，如牛腩新闻公布系统中的页脚块footer，随着内容区浮动的应用会使其跟着左浮动跑到右边，而我们想让其单独作为一行出如今最下边。这时就不得不用一个clear:both了。

</p>
<div class="box2"></div>
<p id="clearF">有时候我们浮动会带给我们额外的困扰。如牛腩新闻公布系统中的页脚块footer。随着内容区浮动的应用会使其跟着左浮动跑到右边。而我们想让其单独作为一行出如今最下边。这时就不得不用一个clear:both了。有时候我们浮动会带给我们额外的困扰，如牛腩新闻公布系统中的页脚块footer，随着内容区浮动的应用会使其跟着左浮动跑到右边，而我们想让其单独作为一行出如今最下边，这时就不得不用一个clear:both了。　　
</p>
</body>
</html>

总结：好了，上边介绍的不过float的几种应用，不只限于此。但不管是float还是clear，都是排版设计的一种方式。

掌握这些技巧，是一个web有web开发基础人员的必备知识，作为CSS+div控制的一种手段。再结合我们的牛腩新闻公布系统前台，我们能否够把界面设计的更有自己的风格呢？Ofcourse,yes！

CSS（三）解析盒子模型的浮动

标签：元素浮动 text width 漂浮改变 article div post

原文地址：http://www.cnblogs.com/ljbguanli/p/7074372.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行