解疑答惑—解决脱离标准文档流（恶心的浮动）

在标准文档流中要并排显示内容但是会出现有的块级标签脱离标准文档流的现象，为了解决这种现象我们有三种方法1、浮动 2、绝对定位 3、固定定位

浮动的方法解决脱表的问题真的是让人哑巴吃黄连有苦难言，这个浮动整整让我迷惑了一个礼拜，最终发现还有比这个方法好很多的一个方法就是绝对定位，非常好理解，而且用起来还非常的方便。

那么这里我先说一下清除浮动的方法有三种方法：1给父盒子设置宽高（一般不太常用）在导航栏的设置上用的很多，这里不做过多的介绍。

2.clear:both

　　就是清除left 、right、both的浮动

用法：

<div>
        <ul>
            <li>Python</li>
            <li>web</li>
            <li>linux</li>
            <!-- 给浮动元素最后面加一个空的div 并且该元素不浮动 ，然后设置clear:both  清除别人对我的浮动影响-->
            <!-- 内墙法 -->
            <!-- 无缘无故加了div元素  结构冗余 -->
            <div class="clear"></div>
            
        </ul>
        
</div>
<div class="box">
        
</div>

css样式：

*{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        
        }


        div{
            width: 400px;
        
        }
        

        div ul li {
            float: left;
            width: 100px;
            height: 40px;
            background-color: red;
        }
        .box{
            width: 200px;
            height: 100px;
            background-color: yellow;
        }
        .clear{
            clear: both;
        }



这种方法用的也比较少

3伪元素清除法（常用）

用法：给浮动的元素的父盒子添加一个clearfix的类，然后设置

.clearfix:after{
    /*必须要写这三句话*/
    content: '.';
    clear: both;
    display: block;
}

新浪首页推荐伪元素清除法的写法

/*新浪首页清除浮动伪元素方法*/
              content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden

个人觉这个记忆的代码有点繁琐，但是清除的比较彻底

4.overflow：hidden（常用）

这个也能处理但是会出现一个问题：这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

　　说了这么多都是在处理一个问题就是清除浮动，但是我们回到最初的问题，我们是为什么牵扯到浮动的，就是因为块级标签脱离标准文档流的事情，我们前面说了解决这个问题不止有这一种方法，还有绝对定位的方法，但是我就在这个浮动里，面不知道吃了多少亏，我差点就爬不出来了，我都感觉我好像没没有办法去设计网页了，只要设计网页就有脱表的问题出现，只要出现就要用浮动，用浮动就要清除浮动，我感觉所有的bug都是在处理浮动上，险些放弃了前端，但是还好有绝对定位的出现，在让我对前端重新燃起了希望之光，下面我着重介绍以一下绝对定位，只要学会了绝对定位，什么你的浮动呀，清除浮动呀，统统去吃屎吧，“父相子绝”解决你的所有问题

二、绝对定位（父相子绝）　　

　　四个字就是核心：“父相子绝”父盒子相对定位子盒子绝对定位解决一切你的脱标问题

特点：1、脱标 2、做遮盖效果，提高了层级，设置绝对定位以后，不区分行内元素和块级元素，都能设置宽高。

参考点：

一、单独一个绝对定位的盒子

1、当我们使用top属性描述的时候是以也页面的左上角为参考点来调整位置

2、当我们使用bottom属性描述的时候，是以首屏页面左下角为参考点来调整位置

二、以父辈盒子作为参考点

1、父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素的左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。

2、如果父亲设置了定位，那么以父亲为参考点。如果父亲没有设置定位，那么以父辈元素设置定位的为参考点

3、不仅仅是父相子绝，父绝子绝，都是以父辈元素作为参考点

注意：父绝子绝没有实战意义，一般不会出现父绝子绝，因为绝对定位脱离标准文档流，影响页面的布局，相反“父相子绝”在我们的页面布局中，是常用的布局方案，因为父亲设置相对定位，不脱离标准流。子元素设置绝对定位，仅仅是在在当前的父辈元素内调整该元素的位置

　　绝对定位的盒子无视父辈的padding

*{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 100%;
            height: 69px;
            background: #000;
        }
        .box .c{
            width: 960px;
            height: 69px;
            background-color: pink;
            /*margin: 0 auto;*/
            position: relative;
            left: 50%;
            margin-left: -480px;

            /*设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中*/
        }

解决脱标用绝对定位，父元素设置为相对定位： position：relative

　　　　　　　　　　子盒子设置为绝对定位： position：absolute

秒客网

解疑答惑—解决脱离标准文档流（恶心的浮动）

相关文章