zoukankan      html  css  js  c++  java
  • css浮动Float

    核心:浮动元素会脱离文档流并向左/向右移动,直到碰到父元素或者另外一个浮动元素。

    float :left 向左浮动

       right 向右浮动

       none (默认)

          inherit  继承父元素

    float效果

    原效果图

    换张图.....因为我突然发现一个问题,用这张图不好解释........

    原图

    代码

            #container{
                 1000px;
                background-color:      #48D1CC;
                margin: 0 auto;
                padding: 40px;
            }
            .box1{
                 250px;
                height: 200px;
                margin: 20px 20px;
                background-color: greenyellow;
            }
            .box2{
                 400px;
                height: 300px;
                margin: 20px 20px;
                background-color: yellow;
            }
            .box3{
                 500px;
                height: 400px;
                margin: 20px 20px;
                background-color: lightblue;
            }
            span{
                font-size: 25px;
            }
    
    
    
            <div id="container">
                <div class="box1"><span>1111111111</span></div>
                <div class="box2"><span>222222222222</span></div>
                <div class="box3"><span>33333333333333</span></div>
            </div>            

    然后让div1右移动,效果如下图

    当div  float设置为right时,div1会脱离标准文档流,div2和div3会重新组成新的文档流,而div1会向右浮动直到碰到父元素

    当设置div2 float为right时,div2到第二行的最后边去了,这是为什么,为什么不在第一排呢?这是因为第一排是block,单独占据一行,并且还在标准流中,所以div2法占用其位置

    当div2 float为left时,效果如下,div2浮动到div3上去了,这边有一个问题,div3中的span被挤到下面去了,这是为什么呢,因为使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。而对于使用absolute positioning脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它。

    这边有个问题,为什么div2会在div2下面一点呢,不是应该在同一行吗?

    当float都设置成left时,由于div 1 2 3都脱离了标准流,会导致父元素高度坍塌

    使用clear清除浮动

    由于浮动带来的不确定性.....经常会造成布局的紊乱,清除浮动就非常有必要了

    clear属性不允许被清除浮动的元素左边或者右边挨着浮动元素,底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间

    比如刚刚上面的图,我要给父元素清除浮动,就只要

    1 <div id="container">
    2     <div class="box1"><span>1111111111</span></div>
    3     <div class="box2"><span>222222222222</span></div>
    4     <div class="box3"><span>33333333333333</span></div>
    5     <div style="clear: both"></div>
    6 </div>

    然后上面就变成这样了

    注意,不要给浮动元素上添加浮动,就算给元素清除了浮动,但它还是脱离标准文档流的,所以父元素还是坍塌的

    现在我们一般清除浮动的方法是使用clearfix 类,兼容性还比较好

    全浏览器通用的clearfix方案

    引用zoom支持IE6/IE7

    加入:before解决现代浏览器的边距折叠问题

     1  .clearfix:before,.clearfix:after{
     2      display: table;
     3      content: "";
     4  }
     5  .clearfix:after{
     6      clear: both;
     7  }
     8  .clearfix{
     9      *zoom:1;
    10  }
      
    1 <div id="container" class="clearfix">
    2     <div class="box1"><span>1111111111</span></div>
    3     <div class="box2"><span>222222222222</span></div>
    4     <div class="box3"><span>33333333333333</span></div>
    5 </div>

    使用overflow:hidden;清除浮动

    还有一种是BFC清除浮动

    使用overflow:hidden;

    1 #container{
    2        1320px;
    3       background-color:      #48D1CC;
    4       margin: 0 auto;
    5       padding: 40px;
    6       overflow: hidden;
    7 }
  • 相关阅读:
    Android自动化测试探索(三)Android SDK tools安装、aapt配置以及使用aapt获取apk包名
    城市要素库时空分析项目启动
    在Python3.5下安装和测试Scrapy爬网站
    快速制作规则及获取规则提取器API
    为采集动态网页安装和测试Python Selenium库
    为编写网络爬虫程序安装Python3.5
    【04】基础:将采集结果转成Excel
    【03】基础:同种网页结构套用采集规则
    【02】基础:单页采集(以微博博主主页采集为例)
    【01】基础:集搜客爬虫软件安装
  • 原文地址:https://www.cnblogs.com/jiangshichao/p/7533520.html
Copyright © 2011-2022 走看看