zoukankan      html  css  js  c++  java
  • 浮动

    块级元素与行内元素之间的互相转换

    • display
      • inline 行内元素
        • 不可以设置宽高
        • 基线对其问题
        • 间隙问题
        • 从左到右排布
      • inline-block
        • 不可以设置宽高
        • 基线对其问题
        • 间隙问题
        • 从左到右排布
    • float
      • left 左浮动
      • right 右浮动
      • none 去掉浮动

    浮动的特点

    • 脱离文档流(父元素找不到子元素了,相当于子元素来到了第二层级,平行于标准文档流)
    • 在不设置宽高时,宽高时由内容决定的
    • 所有的元素(无论块级元素还是行内元素)都可以设置float浮动这个属性
    • 图文混编
    • 不继承

    float比display的权重大

    清除浮动带来的影响(清除浮动)

    • 给父元素设置高度
      • 子元素无论是否有内容,父元素的高度是一定的
    • 给父元素设置一个overflow:hidden;
      • 子元素设置浮动后,脱离了文档流,给给父元素设置一个overflow:hidden; 后,会把子元素拉回文档流内
    • 在所有设置浮动的元素后加clear:both;
      1. 这个元素必须是块级元素
      2. 用在所有设置浮动的元素之后
      3. 这个块级元素不能带有浮动的属性
    <style>
    ul li{
    width: 100px;
    height:100px;
    list-style: none;
    float: left;
    }
    </style>
    <ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <div style="clear: both"></div>
    </ul>
    • 用伪元素来清除浮动带来的影响——常用清除浮动的方法
    <style>
    <!--兼容高版本浏览器-->
    .clear:after{
    display: inline-block;
    content: "";
    clear: both;
    }
    <!--兼容低版本浏览器(即IE9以下版本)-->
    .clear{
    *zoom:1;
    }
    </style>

    在项目中,给子元素设置浮动,必须给父元素(挨着子元素最近的父元素)设置清除浮动带来的影响

  • 相关阅读:
    js打开新窗口
    JS普通浏览器页面传参
    MUI之移动APP页面之间传递参数
    flex布局原理
    css3之Tab页面切换
    css之左边竖条的实现方法
    “程序猿”——要理清你的思路!
    win32调试——OutputDebugString
    des加密——补齐
    SVN 过滤文件
  • 原文地址:https://www.cnblogs.com/tiantian9542/p/8971883.html
Copyright © 2011-2022 走看看