zoukankan      html  css  js  c++  java
  • HTMLCSS学习笔记(四)----浮动原理及清浮动


    •  浮动的原理

    inline-block

    1. 使块元素在一行显示

    2.使内嵌支持宽高

    3.换行被解析

    4.不设置宽度的时候,由内容撑开

    5.在IE6,7下不支持块标签

    浮动:left/right/none

    元素加了浮动后,会脱离文档流,按照指定的一个方向移动知道碰到父级的边界,或者另外一个浮动元素停止。

    1.使块元素在一行显示

    2.使内嵌支持宽高

    3.不设置宽度的时候宽度由内容撑开

    4.脱离文档流(*文档流: 在文档中可显示对象在排列时所占用的位置

    5.提升层级半层 (层级:类比楼房)// 浮的不够高,只够元素本身

     

    clear样式 :left/right/both/none 元素的某个方向上不能有浮动元素


    • 清浮动

    1.给父级也加浮动(不实用)

    2.给父级加display:inline-block;(存在问题)??

    3.在浮动元素下加<div class="clear"></div>

    clear{height:0px;font-size:0;clear:both}(在IE6下有最小高度的问题)

    在IE6下高度小于19px的元素,高度会被当作19px处理。

    解决办法: font-size:0;

    4.在浮动元素下加<br clear="all">(改了结构)

    **// 在IE6,7下浮动元素的父级有宽度就不用清浮动,

       haslayout 根据元素内容的大小 或者父级的父级大小来重新的计算元素的宽高

    display:inline-block

    height:(任何值除了auto)

    width:(任何值除了auto)

    float:(left 或 right)

    zoom:(除了normal外任意值)**

    5.给浮动元素的父级加{zoom:1;} 

    :after{content:""; display: block ; clear: both ;}***用这种!!!***

    6.给浮动元素的父级加overflow(在IE6下存在问题)

    overflow溢出

    auto 溢出默认显示滚动条

    scroll 默认就显示滚动条

    hidden 溢出隐藏



    • 浮动问题

    在IE6,7下要并在同一行的元素都要加浮动

    IE6下双边距BUG

    在IE6下,块元素有浮动和横向的margin。横向的margin值会被放大成两倍

    在IE6,7下l几px的间隙问题

    在IE6,7下li本身没浮动,但是内容浮动了li下就会多出来几px

    解决办法:

    1,给li加浮动

    2,给li加vertical-align:top;(可清理图片下的空隙)

    在IE6下高度小于19px,高度会被当做19px来处理

    解决办法:overflow:hidden

  • 相关阅读:
    python刷新七牛云CDN缓存
    python 操作redis
    redis 设置密码
    redis 允许其他机器连接设置方法
    redis持久化
    redis操作
    redis简介及与memcached比较
    dataframe 处理某列的小数位数并加特殊符号
    django 生成和下载CSV文件
    django 重定向
  • 原文地址:https://www.cnblogs.com/BBeyes/p/6530069.html
Copyright © 2011-2022 走看看