zoukankan      html  css  js  c++  java
  • CSS基础(float属性与清除浮动)

    3.8

    这是CSS里比较重要的属性:浮动,这个属性会在以后经常用到,算是一个重点吧

    浮动

    语法:float:left  |  right  |  none

    特点:

    浮动的元素不占位置,脱离了标准文档流(页面中标签的默认显示方式就是标准流)

    浮动的元素可以实现元素的模式互换

    同方向浮动的元素会顺次排列

    浮动的元素顶端对齐

    默认情况下,子元素浮动只会在父元素的区域之内(除非你刻意用margin把子元素弄出去)

    父元素浮动会把子元素一起带跑

    浮动前面有标准流,会漂浮到标准流的后面

    值得注意的是:文字不会受浮动影响

    利用浮动可以实现:

    制作网页导航(块级元素在一行上显示)

    制作网页左右布局(块级元素在一行上显示)

    副作用:当所有的子元素都设置了浮动之后,不占据位置,从而导致父元素没有高度,这时候就需要清除浮动。

    清除浮动就是消除浮动的影响

     

    方式:

    1. 直接给父元素设置高度
    2. 给父元素设置overflow:hidden     (这里面涉及到BFC)
    3. 使用clear:left  |  right  |  both

    Clear:可以认为设置了clear属性的元素,不能被浮动的元素覆盖

    Left:不允许左边有浮动元素

    Right:不允许右边有浮动元素

    Both:两边都不允许

    用clear 属性清除浮动得到的效果不会涉及到别的元素,只对当前设置元素生效

    给父元素添加一个子元素 div ,放在最后面,设置clear:both;

    1. 使用单伪元素清除浮动(这个方法是必须掌握的)
      .clearfix:after{
             Content:””;(这个属性必须有)
             Clear:both;
             Display:block;
             Visibility:hidden;
             Height:0;
             Line-height:0;     }

    Overflow的用法:

    Overflow:visible   默认值超出部分可见

    Overflow:hidden  将超出部分隐藏

    Overflow:scroll    添加滚动条

    Overflow:auto     自动设置滚动条

     

     

    先这样吧,大家妇女节快乐

     

     

  • 相关阅读:
    UVA101 The Blocks Problem 题解
    洛谷P2790 ccj与zrz之积木问题 题解
    NOIp2018 TG day1 T2暨洛谷P5020 货币系统:题解
    网页学习:day1
    NOIP2018提高/普及成绩
    NOIP2018普及T4暨洛谷P5018 对称二叉树题解
    NOIP2018&2013提高组T1暨洛谷P5019 铺设道路
    比赛:小奔的方案 solution
    比赛:小奔的矩形solution
    比赛:小奔与不等四边形solution
  • 原文地址:https://www.cnblogs.com/chrischan/p/6523579.html
Copyright © 2011-2022 走看看