haslayout、BFC、清除浮动@2018-06-01

最新推荐文章于 2022-10-06 15:38:00 发布
最新推荐文章于 2022-10-06 15:38:00 发布
阅读量174 收藏
点赞数
分类专栏： 前端

1、haslayout
ie特有的布局

2、BFC
类似布局，一块独立渲染的区域，IE6、7没有BFC的机制

触发BFC:

overflow不为visible

浮动（float样式不为none ）

绝对定位（position样式为absolue或者fixed ）

display为inline-block / table-cell / table-caption / flex / table-flex

BFC特性

内部的Box会在垂直方向，从顶部开始一个接一个地放置

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加

每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此

BFC的区域不会与float box叠加

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

计算BFC的高度时，浮动元素也参与计算

应用：
两列布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            body{
                min-width: 600px;
            }
            div{
                height: 200px;
            }
            #left{
                width: 200px;
                background: pink;
                float: left;
            }
            #right{
                background: deeppink;
                overflow: hidden; /*触发BFC*/
            }
        </style>
    </head>
    <body>
        <div id="left">left</div>
        <div id="right">right</div>
    </body>
</html>

margin叠加

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #wrap{
                width: 300px;
                height: 300px;
                background: deeppink;
                margin: 50px;
                overflow: hidden;/*触发BFC*/
            }
            #inner{
                width: 150px;
                height: 150px;
                background: pink;
                margin: 50px;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="inner">

            </div>
        </div>
    </body>
</html>

清浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            清除浮动:
                让浮动的子元素库撑开父级的高度


                02.通过开启BFC
                    浮动盒子的特点，定位盒子的特点:高宽都由内容撑开
        -->


        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #wrap{
                border: 1px solid;
                /*触发bfc*/
                overflow: hidden;
                /*拥有布局*/
                /*zoom:1;*/
                /*position: absolute;*/
                /*float: left;*/
            }

            #inner{
                float: left;
                width: 200px;
                height: 200px;
                background: pink;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="inner">

            </div>
        </div>
    </body>
</html>

3、清除浮动
子元素撑开父元素

###清除浮动
    1.给父级加高度
        扩展性不好

    2.开启BFC
        overflow:hidden
        定位
        浮动

        ie 6 7底下不支持BFC

    3.br标签
        ie6 不支持
        违反了结构 行为 样式相分离的原则

    4.空标签
        违反了结构 行为 样式相分离的原则
            ie6下元素的最小高度为19px
                可以尝试给元素的fontsize设为0---> 2px

    5.伪元素 + 开启haslayout
        因为ie6 7 下不支持伪元素  
        所以要额外的去开启haslayout

几种方式：

伪元素清除浮动，好用
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            清除浮动:
                让浮动的子元素库撑开父级的高度


                05.伪元素
        -->


        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #wrap{
                border: 1px solid;
            }

            #inner{
                float: left;
                width: 200px;
                height: 200px;
                background: pink;
            }


            /*开启haslayout*/
            .xfz{
                *zoom: 1;
            }

            /*ie 6 7 不支持伪元素*/
            .xfz:after{
                content: "";
                display: block;
                clear: both;
            }
        </style>
    </head>
    <body>
        <div id="wrap" class="xfz">
            <div id="inner">

            </div>
        </div>
    </body>
</html>

空标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            清除浮动:
                让浮动的子元素库撑开父级的高度


                04.空标签清浮动
        -->


        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #wrap{
                border: 1px solid;
            }

            #inner{
                float: left;
                width: 200px;
                height: 200px;
                background: pink;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="inner">

            </div>
            <div style="clear: both;"></div>
        </div>
    </body>
</html>

br标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            清除浮动:
                让浮动的子元素库撑开父级的高度


                03.br标签清浮动
        -->


        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #wrap{
                border: 1px solid;
            }

            #inner{
                float: left;
                width: 200px;
                height: 200px;
                background: pink;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="inner">

            </div>
            <br clear="all" />
        </div>
    </body>
</html>

BFC清除浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            清除浮动:
                让浮动的子元素库撑开父级的高度


                02.通过开启BFC
                    浮动盒子的特点，定位盒子的特点:高宽都由内容撑开
        -->


        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #wrap{
                border: 1px solid;
                /*触发bfc*/
                overflow: hidden;
                /*拥有布局*/
                /*zoom:1;*/
                /*position: absolute;*/
                /*float: left;*/
            }

            #inner{
                float: left;
                width: 200px;
                height: 200px;
                background: pink;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="inner">

            </div>
        </div>
    </body>
</html>

父元素加高度

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            清除浮动:
                让浮动的子元素库撑开父级的高度


                01.直接给父级加高度（扩展性不好）
        -->


        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #wrap{
                border: 1px solid;
                height: 300px;
            }

            #inner{
                float: left;
                width: 200px;
                height: 200px;
                background: pink;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="inner">

            </div>
        </div>
    </body>
</html>

参考：
http://www.html-js.com/article/1866

http://www.qianduan8.com/949.html

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

https://www.w3cplus.com/css/understanding-block-formatting-contexts-in-css.html

qq_34983808
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
脱离文档流&margin-top重叠问题&清除浮动
nicecode
07-28 350
1.脱离文档流 脱离文档流的有: (1).浮动 (2).绝对定位 (3).固定定位 脱离文档流的特点: 1.行内元素都变成了块元素; 2.宽高都是由内容撑开 2.margin-top重叠问题 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>test</title> <style> *{
css清除浮动的几种方法以及对应规范说明
09-25
CSS清除浮动是为了处理浮动元素对周围元素布局的影响，特别是防止父元素因浮动元素而高度塌陷。以下是对清除浮动的几种方法及其规范说明的详细解释： 1. **使用`clear:both`** 当一个元素设置`clear:both`时，这个...
css float 清除浮动 haslayout
wangxiaohu__的专栏
07-03 1216
1：float使得指定元素脱离普通的文档流而产生的特别的布局特性。它必需应用在块级元素之上，也就是说浮动并不应用于内联标签。当应用了float那么这个元素将被指定为块级元素。例如一个内联元素设定了float之后就可以给它设定宽高。 .clear:after{ content:" "; display:block; height:0; clear:both; visibility:hidden;
纠结的 hasLayout与overflow:hidden --- 清除浮动之谜
何东狮吼
07-30 2861
之前我在 zoom:1 和 overflow:hidden 日志中就说过zoom:1和overflow:hidden的功能是一致的，甚至用height:1%代替zoom:1也是一样效果 其实我这篇日志想说的就是，IE专有的hasLayout是由zoom:1和height:1
认识hasLayout——IE浏览器css bug的一大罪恶根源(转载网址http://neverned.blog.163.com/blog/static/1265524200933021130561/)
huxin1的专栏
08-06 1093
什么是hasLayout？hasLayout是IE特有的一个属性。很多的ie下的css bug都与其息息相关。在ie中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时，它负责对自己和可能的子孙元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工
IE浏览器下的特别属性 hasLayout
caibinghong的专栏
04-13 156
百度百科看来讲的很清楚：http://baike.baidu.com/view/2945869.htm   haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLa...
hasLayout 介绍，以及其触发条件
何东狮吼
07-27 5282
什么是 haslayout ？　　haslayout 是IE渲染引擎的一个内部组成部分。在IE中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，IE渲染引擎采用了 hasLayout 属性，属性值可以为true或f
BFC 清除浮动详解
dlf_0610的博客
07-09 421
一、什么是BFC BFC(block formatting context）：简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。 中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。 在进行盒子元素布局的时候，BFC提供了一个环境，在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影
CSS中的BFC和清除浮动的方法
爱前端的程序媛的博客
01-31 277
BFC：Box Formatting Context（块级格式上下文）的缩写。通俗来讲，就是管理块级元素的。 一个块级元素开启BFC后，可以管理块内的所有元素的排版布局，但是不能管理自己本身 BFC的布局规则 a．内部的Box会在垂直方向，一个接一个的放置（块级元素独占一行） b．BFC的区域不会与float box重叠------两列布局：左边固定右边自适应（可以开启BFC） c...
CSS之浮动/BFC/清除浮动（十二）
全粘小谭的博客
10-06 301
该文先讲解了CSS布局的几种策略，以及正常布局流是什么，然后逐步讲解浮动的由来，本质，如何产生，以及特性，随后讲解BFC规范，如何创建BFC，BFC的作用，最后列出清除浮动的几种方法。
CSS清除浮动的常用方法优缺点分析
09-27
为了解决这个问题，开发者通常会采用几种不同的清除浮动（clear float）方法。下面我们将详细探讨这些方法的优缺点。 1. **额外元素法** 这种方法是在浮动元素后面添加一个额外的非浮动元素，如`...
详解css清除浮动float的七种常用方法总结和兼容性处理
09-24
为了解决这个问题，开发者通常会采用各种方法来“清除浮动”。本文将详细介绍七种常见的CSS清除浮动的方法，并讨论它们的兼容性处理。 1. **添加空div法** 这是最原始的清除浮动方式，通过在浮动元素后面添加一个空...
详解CSS中zoom属性或overflow:auto属性清除浮动的作用
11-21
`overflow:auto`属性通常用于隐藏内容溢出的情况，当应用于一个包含浮动子元素的父元素时，它会在需要时创建一个新的BFC（块格式化上下文），这样父元素就能自动扩展以包含所有浮动子元素，从而达到清除浮动的效果。...
浅谈CSS中overflow清除浮动的用法
09-24
为了解决这个问题，CSS提供了`overflow`属性，其中的`hidden`和`auto`值可以用来清除浮动。 首先，我们来看一个简单的例子，这个例子中有一个包含两个浮动子元素的父容器： ```html <div id="left"></div> ...
简约清新PPT模板，适用于工作总结，工作计划
07-15
【作品名称】：简约清新PPT模板，适用于工作总结，工作计划 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
Android中SQLite使用方法.docx
最新发布
07-15
数据库
存储图片到SQL-SERVER数据库中.doc
07-15
数据库
【精美排版】sql数据库基础面试题复习题测验题全.docx
07-15
数据库
那帮我写个css的清除浮动吧
05-20
为了解决这个问题，可以使用以下清除浮动的 CSS 代码： ```css .clearfix::before, .clearfix::after { content: ""; display: table; } .clearfix::after { clear: both; } .clearfix { zoom: 1; } ``` 然后...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值