zoukankan      html  css  js  c++  java
  • css之浮动float

    1】个人觉得这个说明挺清楚的:

    浮动元素的定位是基于正常的文档流,然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后,仍然在文档流中的其他元素忽略该元素并填补他原先的空间

    2】元素float后自动转化为块元素

    3】为所有float元素设定width,除了img元素(有隐藏宽度)

    4】清理浮动元素三种方法

        a) 使用标签清理浮动(参考5】中的clear:both部分)

        b)在需要清理浮动的元素中定义overflow:auto;zoom:1(兼容ie6);

        c)在需要清理浮动的元素,例如#layout上定义
            #layout:after{display:block;clear:both;content:”";visibility:hidden;height:0;}

    5】浮动元素的垂直边距(margin)会叠加(10+10),两个未浮动的元素垂直边距(margin)不会叠加(10)

    #nofloatbox { 
    border: 1px solid #FF0000; 
    background: #CCC; 
    zoom:1;
    height:auto;
    margin-bottom:5px;
    }   
    .floatbox { 
    float: left;
    width: 600px; 
    height: 100px; 
    border: 1px solid #0000FF; 
    background: #00FF00; 
    margin:10px;
    }
    #l{
    clear:both;
    width: 600px; 
    height: 100px; 
    border: 1px solid #0000FF; 
    background: #00FF00; 
    margin:10px;
    }
    <div id="nofloatbox"> 
    <div class="floatbox"></div> 
    <div class="floatbox"></div> 
    <div class="floatbox"></div> 
    <div id="l"></div> 

    <div id="l"></div>
    </div>
  • 相关阅读:
    2016/11/10 kettle概述
    2016/11/07 线程的创建和启动
    python3 pip使用报错
    django建表报错
    django学习
    前端系列
    git使用标准
    我的Python之路
    nginx优化
    python安装包的时候报错
  • 原文地址:https://www.cnblogs.com/xiaonvziyi/p/3196229.html
Copyright © 2011-2022 走看看