在CSS样式中有关 float 浮动嵌套 问题
2017-09-19 本文已影响54人
暗恋桃花源丫
浮动元素可以相互嵌套，嵌套规律与流动元素的嵌套相同。浮动的包含元素（父元素）总会自动调整自身的高度和宽度以实现对浮动元素的包含。
我们来看一个例子：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.wrap { border: solid 2px red; float: left; margin:4px; }
.sub { width: 200px; height: 200px; float: left; background: blue; }
</style>
</head>
<body>
<div class="wrap">
<div class="sub"></div>
</div>
<span class="wrap">
<span class="sub"></span>
</span>
</body>
</html>
浏览器效果图：
这时会发现父元素会自动调整自身的大小来包含子元素。
如果包含元素定义了高度和宽度则他不会随子元素的大小而自动调整自身显示区域来适应子元素的显示。注意，在IE6及更低版本浏览器中包含框仍然能够自动调整自身大小来适应子元素的显示大小，不过在IE7版本中微软纠正了这个不符合标准的显示方法。如下
示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.wrap { border: solid 2px red; float: left; margin:4px; width: 100px; height: 100px; }
.sub { width: 200px; height: 200px; float: left; background: blue; }
</style>
</head>
<body>
<div class="wrap">
<div class="sub"></div>
</div>
<span class="wrap">
<span class="sub"></span>
</span>
</body>
</html>
浏览器效果图：
默认状态下溢出不隐藏，我们可以添加 样式 overflow:hidden; 隐藏多余的部分或overflow: scroll; 多余部分显示滚动条。
如果把浮动元素嵌入到流动元素之内，则父元素不能够自适应子元素的高度，
如下示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#contain { background: #FF99FF; }/*包含元素*/
span {float: left; width: 200px; height: 100px; }/*定义共同属>*/
/*内嵌浮动对象样式 */
#span1 { border: solid blue 10px; }
#span2 { border: solid red 10px; }
</style>
</head>
<body>
<div id="contain">
<span id="span1">span元素浮动</span>
<span id="span2">span元素浮动</span>
</div>
</body>
</html>
浏览器效果图：
未适用子元素大小.png
在上图中可以看到包含元素div并，没用显示。原因就是包含元素没有适应子元素的高度，而是根据自身定义的属性以独立的形式显示（父元素没有被撑开，仅收缩成一条直线显示）。所以，在应用混合嵌套式，要预测到浮动与流动混合布局时会出现的各种怪现象，并积极做好兼容处理。
解决方法：可以在包含元素内的最后一行添加一个清除元素，强制撑开包含元素，使其包含浮动元素。
示例如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#contain { background: #FF99FF; }/*包含元素*/
span {float: left; width: 200px; height: 100px; }/*定义共同属>*/
/*内嵌浮动对象样式 */
#span1 { border: solid blue 10px; }
#span2 { border: solid red 10px; }
.clear {/*定义清除类*/
clear:both;
}
</style>
</head>
<body>
<div id="contain">
<span id="span1">span元素浮动</span>
<span id="span2">span元素浮动</span>
<div class="clear"></div><!--增加一个清除元素-->
</div>
</body>
</html>
浏览器效果图：
添加清除元素.png
本文章参考书籍：HTML５＋CSS３＋JavaScript从入门到精通（标准版） 未来科技 编著
如有侵权24小时内删除。联系QQ：1522025433
