zoukankan      html  css  js  c++  java
  • 浮动及清浮动的方法

    浮动

    什么是浮动?

    标签的浮动是指设置了浮动属性的标签会脱离标准流的控制,移动到其父标签的指定位置

    浮动属性
    • float

      • left

      • right

      • none 默认

    浮动的作用
    • 图文环绕

    • 页面布局

    浮动的问题

    标签浮动以后,脱离的正常文档流,导致父标签无法被撑开,会影响后续正常布局

    清浮动的几种方法
    • 给浮动标签的父标签固定高度(不够灵活)

    • 在浮动标签的最后加一个div(块标签),标签本身不符动,且添加样式 clear:both;(代码冗余)

    • 给父标签加overflow属性,overflow为visible以外的其他值时可以帮助实现

    • 推荐方法:给浮动标签的父标签添加 .clearfix

      • .clearfix {
        *zoom:1; //这是针对于IE6/7的
        }
        .clearfix:after {
        content:"";
        clear:both;
        display:block;
        }
      •  

    伪元素
    • div:after {

      }
      //向当前元素的最后一个子元素后添加一个元素
      div:before {

      }
      //向当前元素的第一个子元素前添加一个元素
    •  

  • 相关阅读:
    Javascript异步编程的4种方法(阮一峰)
    vue 要点
    npm指南
    http请求状态及其含义表
    IOS 7层协议
    js模块化
    UITouch触摸事件
    UIGestureRecognizer手势识别
    UISegmentControl 、UIStepper
    UINavigationController
  • 原文地址:https://www.cnblogs.com/zxy37/p/14174615.html
Copyright © 2011-2022 走看看