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

最新推荐文章于 2022-04-24 10:01:17 发布

网络小蚂蚁

最新推荐文章于 2022-04-24 10:01:17 发布

阅读量866

点赞数 4

分类专栏： HTMLCSS2 文章标签： html 文档清除浮动浮动

本文链接：https://blog.youkuaiyun.com/u011351285/article/details/51837416

版权

HTMLCSS2 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了HTML中float属性的使用方法及其带来的元素脱离文档流的现象，探讨了多种清除浮动的方法，包括空标签法、br标签法、after法及overflow:hidden法，并针对IE6等浏览器的兼容性问题提供了具体的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>