CSS清除浮动

时间 2019-11-24

标签 css 清除浮动栏目 CSS 繁體版

原文原文链接

引出问题：css

<style type="text/css">
     .inner { 
          float: right; 
     } 
</style> 

<div class="outer"> 
    <img class="inner" src="/images/ilta.png"> 
    <div class="inner">这个图片比包含它的元素还高， 并且它是浮动的，因而它就溢出到了容器外面!</div> 
</div>

这里没有给最外层的div 设置高度，若是它里面的元素不浮动的话，那么这个外层的高是会自动被撑开的。可是当内层元素浮动后，就出现了一下影响：html

背景不能显示
边框不能撑开
margin 设置值不能正确显示 (padding不会受影响)

1. 使用额外标签法

<style type="text/css">
     .inner { 
          float: right; 
     }
     .clearfix{
          clear: both;
     }
</style>

<div class="outer"> 
    <img class="inner" src="/images/ilta.png" alt="An Image"> 
    <div class="inner">好多了！</div> 
    <div class="clearfix"></div>
</div>

这是早期广泛使用的方法，可是对于有代码洁癖的人来讲，解决的不够完美chrome

2.使用 :after 为元素

<style type="text/css">
       .inner { 
            float: right; 
       }
        .clearfix:after{  /*最简方式*/
            content: '';
            display: block;
            clear: both;
        }
        /* 新浪使用方式
        .clearfix:after{ 
            content: '';
            display: block;
            clear: both;
            height: 0;
            visibility: hidden;
        }
        */
        .clearfix{ /*兼容 IE*/
            zoom: 1;
        }
</style>

<div class="outer clearfix"> 
    <img class="inner" src="/images/ilta.png" alt="An Image"> 
    <div class="inner">好多了！</div> 
</div>

原理：他是利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。其实现原理相似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而outer利用其伪类clear:after在元素内部增长一个相似于div.clear的效果。segmentfault

其中clear:both;指清除全部浮动；content: '.';display:block;对于FF/chrome/opera/IE8不能缺乏，其中content（）能够取值也能够为空。visibility:hidden;的做用是容许浏览器渲染它，可是不显示出来，这样才能实现清楚浮动。浏览器

3. 利用 overflow:hidden 属性

<style type="text/css">
       .outer{
            overflow: hidden;
            zoom: 1;/*兼容 IE*/
        }

       .inner { 
            float: right; 
       }
</style>

<div class="outer"> 
    <img class="inner" src="/images/ilta.png" alt="An Image"> 
    <div class="inner">好多了！</div> 
</div>

原理：使用overflow属性来清除浮动有一点须要注意，overflow属性共有三个属性值：hidden,auto,visible。咱们能够使用hiddent和auto值来清除浮动，但切记不能使用visible值，若是使用这个值将没法达到清除浮动效果，其余两个值均可以，其区听说在于一个对seo比较友好，另个hidden对seo不是太友好，其余区别我就说不上了，也不浪费时间。布局

4. 父元素浮动

当父元素浮动的时候，无需为子元素的浮动清除浮动,布局时常常用到post

<style type="text/css">
       .outer{
            float: left; 
        }

       .inner { 
            float: left; 
       }
</style>

<div class="outer"> 
    <img class="inner" src="/images/ilta.png" alt="An Image"> 
    <div class="inner">好多了！</div> 
</div>

能够看出虽然 outer DIV 消除了塌陷现象，但因为其也发生了浮动故，其后元素若处于正常文档流，会被跌在底下。spa

若是要解决能够参考前面的办法。code

<style type="text/css">
     .outer{
          float: left; 
     }
     .inner { 
          float: left; 
     }
     .clearfix{
          clear: both;
     }
</style>

<div class="outer"> 
    <img class="inner" src="/images/ilta.png" alt="An Image"> 
    <div class="inner">好多了！</div> 
</div>
<div class="clearfix"></div>

5. 父元素处于绝对定位

<style type="text/css">
     .outer{
          position: absolute;
     }
     .inner { 
          float: left; 
     }
     .clearfix{
          clear: both;
     }
</style>

<div class="outer"> 
    <img class="inner" src="/images/ilta.png" alt="An Image"> 
    <div class="inner">好多了！</div> 
</div>
<div class="clearfix"></div>

与上一个方法同理，因为绝对定位已脱离正常文档流，故出现相同状况，解决办法依旧能够使用以上办法结合，灵活多变。htm

摘自：清除浮动（clearfix hack）

CSS清除浮动float的三种方法总结，为何清浮动？浮动会有那些影响？

浅谈 CSS 清除浮动的 6 种方法