• css浮动及清除浮动


    1. 浮动

       1. 特点:

          1.不占原来的位置(脱标)

          2.可以让块级元素在一行上显示    

          3.浮动可以把行内元素转化为行内块元素

    清除浮动

        清除浮动指的是清除浮动的影响

       注意:

         当子元素设置了浮动,父元素没有高度的时候,造成页面布局混乱。这种情况下进行清除浮动。

     清除浮动的几种方式

          1.使用clear:left|  right  | both

              Clear:both;

           这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清楚浮动,空标签可以是div标签,也可以是P标签等,并为其定义CSS代码:clear:both。

        

         2.给父盒子设置overflow:hidden

           此方法解决了通过空标签元素清除浮动而增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性:overflow,我们可以使用hiddent和auto值来清除浮动,但切记不能使用visible。 

           如果父盒子中有定位的元素,一般不推荐使用该种方式清除浮动。

        3.使用伪元素清除浮动

              .clear:after{

                     content:'';

                     display:block;

                    visibility:hidden;

                    height:0;

                    line-height:0;

                   clear:both 

              }

               .clear{

               zoom:1      /*解决兼容IE浏览器*/

               }

    Overflow的使用

          1. hidden     将超出部分进行隐藏

            

           2.auto

      如果内容超出盒子,那么给盒子设置滚动条,如果内容没有超出盒子,那么不显示滚动条。

          3.scorll

              添加滚动条

        

  • 相关阅读:
    用Intellij idea创建Maven项目JDK8源码阅读环境问题整理
    咱的Maven项目能用Junit5吗?
    43- 8 mvc知识点
    42-7 linq
    (Ant编程) Iqueryable 类型介绍
    Iqueryable 类型中 的 使用lambda 注意的坑。 (linq to sql)
    (Ant编程) Linq 的select 方法
    Scala模式匹配
    scala正则表达式
    P4336 [SHOI2016]黑暗前的幻想乡
  • 原文地址:https://www.cnblogs.com/zhuzhu88/p/6714935.html
Copyright © 2020-2023  润新知