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

最新推荐文章于 2024-08-28 15:21:08 发布

追着蜗牛打

最新推荐文章于 2024-08-28 15:21:08 发布

阅读量2.4k

点赞数 1

分类专栏：牛腩新闻发布系统文章标签： css 界面设计

本文链接：https://blog.csdn.net/u010191243/article/details/38642103

版权

牛腩新闻发布系统专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

浮动在这个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！