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

HTML学习总结（4）-浮动，清浮动

2016-07-06 11:21 573 查看

HTML学习总结（4）浮动

清除浮动

使元素脱离文档流，按指定方向移动，遇到父级边界或相邻浮动元素停下

float浮动

脱离文档流

提升层级【半层】

内容撑开宽高【默认】

内联支持宽高

块显示在一排

float–>value[浮动起来]

right 元素向右浮动

left 元素向右浮动。

none 默认值，不浮动

inherit 规定应该从父元素继承 float 属性的值。

clear–>value[不许浮动]

right

left

none

inherit

both 霸气—>[左右都不许浮动]

清除浮动的方法

加高【扩展不好】

box{}

父级浮动【页面中所有元素加浮动，margin左右自动失效】

.box{float:left;}

inline-block 清除浮动【margin左右自动失效】

.box{display:inline-block;}

空标签清除浮动【IE6最小高度19px->解决后IE6还有2px偏差】

.clear{ height:0px;clear:both;/*font-size:0; IE6  还有2px偏差----解决：overflow:hidden;*/}

br清除浮动【不符合w3c标准 (不符合结构样式行为三者分离的要求)】

<br clear="all" /> /*浮动元素下加*/

after清楚浮动<推荐>

after:元素末尾加内容【ie6，7下不兼容(IE6，7下有宽度不需清浮动 box{width:50px;})】

zoom：触发IE下haslayout，使元素根据自身内容计算宽高

.clear:after{content:'';display:block;clear:both;}
.clear{zoom:1;}
/*加这里-->  <div class="box clear"> */

overflow:hidden 清楚浮动【需要配合宽度或者zoom 兼容IE6，7】

.box{overflow:auto; zoom:1;}

浮动兼容性问题

- IE6双边距

IE6下块属性标签浮动，有横向margin时，横向margin加倍

解决：display：inline；

- IE6 li部分兼容性问题

–>左右两列布局，右边右浮动IE6 IE7下折行；(左边元素浮动)

解决:左边元素浮动

–>IE6 IE7 li 下元素都浮动在IE6 IE7下 li 下方会产生4px间隙问题；（加vertical-align:top；）

解决：1.li加浮动 2.li加 vertical-align:top；

///—–代码——

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
body{margin:0;padding:0;}
.box{/*width:960px; margin:0 auto;*/border: 3px solid #b200ff;}
.left{width:300px;float:left;}
.left div{height:298px;background:#ffd800;border: 3px solid #0026ff;}
.center{width:360px;float:left;}
.center div{height:198px; background:#ff0000;border: 3px solid #0026ff;}
.right{width:300px;float:right;}
.right div{height:298px;background:#808080;border: 3px solid #0026ff;}
</style>
</head>
<body>
<div class="box">
<div class="left">
<div></div>
<div></div>
<div></div>
</div>
<div class="center">
<div></div>
<div></div>
</div>
<div class="right">
<div></div>
<div></div>
</div>
<!--
<div class="clear"></div>
<br clear="all" />
-->
</div>
</body>
</html>

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

标签： html 文档清除浮动浮动

相关文章推荐

新的分享

章节导航