float中的某些问题

最新推荐文章于 2025-09-12 15:58:40 发布

weixin_34112030

最新推荐文章于 2025-09-12 15:58:40 发布

阅读量101

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/u/1162340/blog/136224

2019独角兽企业重金招聘Python工程师标准>>>

float浮动，在css中一个相当重要的属性功能，其可以用来创建多列网页布局、由无序列表创建导航工具栏等。float属性的取值包括：none（不浮动）、left（左浮动）、right（右浮动）。其可以应用于不仅于图像，还包括段落、列表、div块等，但在使用float时应注意几个几个基本行为：

1、当float不等于none，即引起元素浮动时，元素将被视为块元素，相当于display：block；

2、当浮动文本类时，必须指定其width值

3、浮动元素将停留在包含在它的父级元素的区域里，不会穿过padding区

在使用float时，首先要明白的是，其浮动的定位是相对于父级元素的；如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html" charset="utf-8"/>
<style type="text/css">
*{ margin: 0; padding: 0; }
.main{ width: 1024px; height: 768px; background-color: gray; }
.left{ width:200px; height:50px; background-color: blue; /*float:left;*/ }
.right{ width:250px; height:60px; background-color: red; float:right; }
</style>
</head>
<body>
<div class="main">
<div class="left">
<label>蓝色区域</label>
</div>
<div class="right">
<label>红色区域</label>
</div>
</div>
</body>
</html》

第一个为红色区域.right中未设置漂浮时图片，后为漂浮后图片。通过其可以看出：1、当红色区域向右飘时，其相对于其父元素div，即灰色区域向右漂浮。2、在蓝色区域，虽然设置其width和height属性值，但其仍会占据整个行的区域，设置width值仅为可视区域。因此，红色区域未漂浮至灰色区域最右顶端，若想其漂浮至最右顶端，则需要设置.left{float：left；}即将注释/*float:left*/取消结果如：

在使用漂浮时，由于浮动元素不会占据正常文档流空间，因此浮元素原由区域将由未明确定位的块级元素填充其区域。

还有个问题，即是，浮动元素的容器不会自动伸展来包含浮动元素而引起父级元素的坍塌，如上代码，若将蓝色区域与红色区域均进行漂浮，再将父级元素div中.main中height属性不设置，代码改为 .main{ width:524px; margin: auto; background-color: gray; }，则结果将是：

平面图