zoukankan      html  css  js  c++  java
  • 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

              添加滚动条

        

  • 相关阅读:
    拾遗:『rhel6系列的开、关机脚本』
    拾遗:{rpm、yum及源码方式管理软件包}
    拾遗:sed&vim
    拾遗:Linux 用户及权限管理基础
    『BASH』——Learn BashScript from Daniel Robbins——[003]
    『BASH』——Hadex's brief analysis of "Lookahead and Lookbehind Zero-Length Assertions"
    『BASH』——Learn BashScript from Daniel Robbins——[001-002]
    Modular arithmetic and Montgomery form 实现快速模乘
    __int128使用
    Windows10下安装CentOS7双系统
  • 原文地址:https://www.cnblogs.com/zhuzhu88/p/6714935.html
Copyright © 2011-2022 走看看