欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

清除浮动和闭合浮动的介绍

发布时间:2019-05-13  编辑:杨雨个人博客网站   点击:   

本篇文章给大家带来的内容是关于清除浮动和闭合浮动的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

为什么要清除浮动

  • 子元素 float:left; 脱离文档流,会造成父元素塌陷(撑不起来)

  • 父元素 靠子元素撑起来

  • 清除浮动 clear:both

<h1>清除浮动</h1>
<div class="border-div clear">
    <div class="div1">
        
    </div>
    <div class="div2">
        
    </div>
</div>


// 伪元素 :after
.clear:after{
    clear:both;
    content:".";
    display:table;
    width:0;
    height:0;
    visibility:hidden;
}
  • 闭合浮动 - 增加额外元素 clear:both

父级元素不设置 height

子元素 float:left

额外增加元素 clear:both
<div class="main">
    <div class="sub"></div>
    <div class="sub"></div>
    <div style="clear:both"></div>
</div>
  • 闭合浮动 -- 使用 br 和其自身的 Html 属性

==注意== clear=all 不推荐使用的属性(moz)

<div class="main">
    <div class="sub"></div>
    <div class="sub"></div>
    <br clear="all">
</div>
  • 闭合浮动 -- 父元素设置 overflow:hidden

<div class="main">
    <div class="sub"></div>
    <div class="sub"></div>
</div>
  • 闭合浮动 -- 父元素设置 display:table

<div class="main">
    <div class="sub"></div>
    <div class="sub"></div>
</div>
本文地址:http://itbyc.com/web/css3/19463.html
转载请注明出处。
分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1