zoukankan      html  css  js  c++  java
  • css浮动与清除浮动

    css浮动

    1. 浮动:float:left/float:right
      1. 标准流(文档流):元素按部就班按照自身的特性排列。
      2. 浮动:元素会脱离标准普通流的控制,移动到指定位置的过程
      3. 结论(浮动的特征):
        1. 浮动后的元素会脱离标准流,漂浮在其他没有浮动的盒子上边
        2. 浮动后的元素不占有原来的位置
        3. 浮动后的两个块状元素会在同一行显示
        4. 浮动后的元素不会超出父元素的范围
        5. 浮动后的元素自动的转化为行内块元素
        6. 浮动后的元素不超过父元素的内边距

    遇到的问题;

    浮动元素引起的问题

    答:多个浮动起的元素是无法撑开父元素的宽度,父元素的高度可能会变成0。

    还有若浮动元素前面还有同级元素没有浮动则会影响页面结构

    2、清除浮动

      1. 清除浮动 : 清除浮动所带来的影响,并不是真正的清除浮动。
      2. 为什么要清除浮动?
              浮动后的元素不会撑开父元素的高度,因为浮动是不占位置的。
          3、如何清除浮动:
        1. 额外标签法:在浮动元素的后边加上标签
          1. <div ></div>    
          2. 清除左浮动 clear: left
          3. 清除右浮动 clear: right
          4. 清除左右浮动 clear: both  
          5. 优点:通俗易懂,书写方便
          6. 缺点:添加了额外的标签,结构化差
        2. overflow 属性:在父元素中添加
          1. overflow: hidding;
          2. overflow:scroll;
          3. overflow:auto;
          4. 优点:代码简洁
          5. 缺点:盒子中多余的内容会被隐藏掉
        3. 使用 after 伪元素清除浮动:在父元素中添加
          1.   .____::after { content:' ';display:block;clear:both;}
          2. 优点:符合闭合浮动思想、结构语义话正确
          3. 缺点:IE6-7 不支持 :after
        4. 双伪元素清除浮动:给父元素添加 after 以及 before 伪元素
          1.   .____::after, .____::before { content: ' ';display: table;clear: both;}
          2. 优点:代码简洁
          3. 缺点:IE6-7 不支持 :after
     
  • 相关阅读:
    〖Linux〗Kubuntu设置打开应用时就只在打开时的工作区显示
    〖Linux〗Kubuntu, the application 'Google Chrome' has requested to open the wallet 'kdewallet'解决方法
    unity, dll is not allowed to be included or could not be found
    android check box 自定义图片
    unity, ios skin crash
    unity, Collider2D.bounds的一个坑
    unity, ContentSizeFitter立即生效
    类里的通用成员函数应声明为static
    unity, Gizmos.DrawMesh一个坑
    直线切割凹多边形
  • 原文地址:https://www.cnblogs.com/wenaq/p/13509748.html
Copyright © 2011-2022 走看看