您的位置：首页 > 其它

浮动与清浮动

2016-07-25 20:25 363 查看

浮动（是否霸道地独占一行）

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

body{margin:0;}

.box{width:900px;margin:0 auto;}

.left{width:300px;float:left;}

.left div{height:298px; background:#9F0;border:1px solid #fff;}

.center{width:300px;float:left;}

.center div{ height:198px;background:#CF0;border:1px solid #fff;}

.right{width:300px;float:right; }

.right div{ height:298px;background:#FF0;border:1px solid #fff;}

</style>

</head>

<body>

<div class="box">

<div class="left">
<div></div>
<div></div>

</div>

<div class="center">

<div></div>

<div></div>
<div></div>

</div>

<div class="right">

<div></div>

<div></div>

</div>

</div>

</body>

</html>

选择浮动不选择inline-block的原因：紧紧地并排显示，代码换行不被解析

浮动含义：轻轻地飘起来，朝某一个方位贴紧，其余的元素被自动推到本可以去而不能去如今却腾出位的地方

元素加了浮动，会脱离文档流，按照指定的一个方向移动直到碰到父级的边界或者另外一个浮动元素停止
1.使块元素在一行显示
2.使内嵌支持宽高
3.不设置宽度的时候宽度由内容撑开
4.脱离文档流（文档流是文档中可显示对象在排列时所占用的位置）
5.提升层级半层

清浮动：

1.给父级也加浮动

2.给父级加display:inline-block

3.在浮动元素下加<div class="clear"></div>

.clear{ height:0px;font-size:0;clear:both;}

4.在浮动元素下加<br clear="all"/>

5. 给浮动元素的父级加{zoom:1;}

:after{content:""; display:block;clear:both;}

**在IE6，7下浮动元素的父级有宽度就不用清浮动

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航