您的位置：首页 > Web前端 > CSS

第五节 浮动

2016-09-18 10:36 127 查看

1、浮动——float

特性：

1、使块元素能够在一行显示；

2、使行内属性标签支持宽高；

3、没有宽度的时候内容撑开宽度

4、脱离文档流（文档流是可显示对象在排列是所占的位子。可以把整个html文档想象成一个平面，元素浮动的时候会脱离这个平面，悬浮在空中），并按照一定方向移动直到碰到父边界。

5、提升层级半层（一个元素分为上下两个半层，上半层显示字体，下半部分显示背景色，如图，红色区域为div1，蓝色为div2，设置div1浮动，div1的背景色将与div2的字体处于同一层）

所以浮动到底有什么用处呢？随便打开一个电商网页，比如下图中的商品列表，或者随处可见的轮播图，都可以用到浮动啦。





比如通过浮动实现下边的布局，我们将大的div浮动在左边，小的div浮动在右边，设置下父元素的宽高，就可以实现这种布局啦。



<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
div{margin: 0px;padding: 0px;}
.clear{zoom:1;}
.clear:after{content: "";display: block;clear: both;}

#all{width: 400px;height: 400px;border: 3px solid #000;}

#big{float: left;width: 300px;height: 300px;background: red;}
.small{float: right;width: 100px;height: 100px;}
.single{background: #f0f0f0;}
.double{background: #fff;}
</style>
</head>
<body>
<div id="all" class="clear">
<div id="big"></div>
<div class="small single">1</div>
<div class="small double">2</div>
<div class="small single">3</div>
<div class="small double">4</div>
<div class="small single">5</div>
<div class="small double">6</div>
<div class="small single">7</div>
</div>
</body>
<div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"></html></span></div>

       不知道有没有人注意到clear这个类，这段代码是用来干嘛的呢？这就是下面一个问题，清除浮动。首先，为什么要清除浮动？上边的代码我们将id为all的div宽高去掉，将class=clear去掉，此时会发现，父元素高为0，这就是内部元素浮动造成的。也就是说，内部元素浮动时，由于脱离了文档流，会撑不起父元素的宽高。而标红的代码就是用于清除浮动造成的这种影响。也许有小伙伴会觉得，撑不起就撑不起呗，那你想过下边的元素该怎么办吗？他会顶上来的，整个布局都会乱掉的。当然，值得一提的是，如果父元素有设置宽高，就可以不清除浮动了。

2、清除浮动的方法

A）给父级加同样的浮动.（不现实）

B）给父级加display：inline-block（margin左右auto失效,因为inline-block不支持左右的margin）

C）在浮动元素下方加一个空的div，并设置如下图所示的样式（IE6 最小高度 19px；（解决后IE6下还有2px偏差））

D)在浮动元素下边加<br clear=”all”>（问题：不符合工作中：结构、样式、行为，三者分离的要求）

 E）推荐：给父元素加zoom=1，并为其添加伪类after（其中clear为父类的样式之一；IE6、7下，after在不支持，但是若父级元素有宽度就无须清浮动）。这也就是上边我们用到的方法啦！

F)给父级元素加overflow（要配合zoom,zoom用于触发 IE下 haslayout，使元素根据自身内容计算宽高）

3、浮动在IE下的问题：

说完了浮动的作用以及如何解决它够引起的问题，接下来就是浮动在ie6、7下会出现的bug。

A）在ie6下，块元素有浮动和横向的margin，横向的margin会被放大到两倍。解决办法是：将块元素的display改成inline

B）在IE6/7下，要排在同一行的元素，需要全部都加上浮动，否则可能有换行。

C)  在IE6/7下，li的内部元素有浮动，本身没有浮动，那么li下就会多出几px。解决办法是：给li加浮动或vertical-align：top

希望上边的介绍对你有帮助。下边给个综合实力的源代码，帮助大家在浮动的理解上提升一步。

运行效果截图：



源代码：

<!DOCTYPE HTML>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<title>实验一</title>
<style type="text/css">
/*reset*/
body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;font-family:宋体;/* font-family:XX; */}
ol,ul{list-style:none;padding:0;margin:0;}
a{text-decoration:none;}
img{border:none;}
/* end reset */

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

.all{width: 685px;height: 457px;border: 1px solid #000;margin: 30
4000
px auto;padding: 25px;background: #FFFFFF;}
.content{border: 1px solid #D9D9D9;padding: 16px 20px;}

.header ul{padding-bottom: 19px;}
.header li{float: left;}
.header li a{color: #000;font-size: 14px;display: block;margin:14px 0px 0px 13px;}
.header li img{display: block;}
.header .more{float: right;margin: 0px;}

.detail ul{}
.detail li{float: left;padding-right: 12px;width: 115px;height: 185px;}<span style="color:#ff0000;">/* 思考下为什么不用margin */</span>
.detail li img{display: block;}
.detail span{line-height: 36px;display: block;overflow: hidden;}
</style>
</head>
<body>
<div class="all">
<div class="content">
<div class="header">
<ul class="clear">
<li>
<img src="./1-1.png">
</li>
<li>
<a href="#">电视剧频道</a>
</li>
<li>
<a href="#">台剧</a>
</li>
<li>
<a href="#">韩剧</a>
</li>
<li>
<a href="#">TVB</a>
</li>
<li>
<a href="#">美剧</a>
</li>
<li>
<a href="#">最新片花</a>
</li>
<li class="more">
<a href="#">更多>></a>
</li>
</ul>
</div>
<div class="detail">
<ul class="clear">
<li>
<img src="./1-2.png">
<span>笑傲江湖</span>
</li>
<li>
<img src="./1-2.png">
<span>笑傲江湖</span>
</li>
<li>
<img src="./1-2.png">
<span>笑傲江湖</span>
</li>
<li>
<img src="./1-2.png">
<span>笑傲江湖</span>
</li>
<li>
<img src="./1-2.png">
<span>笑傲江湖</span>
</li>
<li>
<img src="./1-2.png">
<span>笑傲江湖</span>
</li>
<li>
<img src="./1-2.png">
<span>笑傲江湖</span>
</li>
<li>
<img src="./1-2.png">
<span>笑傲江湖</span>
</li>
<li>
<img src="./1-2.png">
<span>笑傲江湖</span>
</li>
<li>
<img src="./1-2.png">
<span>笑傲江湖</span>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html+css基础部分 浮动 清除浮动的方法 浮动在IE下的bug
相关文章推荐
新的分享
章节导航