• 浮动


    一.脱标的三种方式

    标准流里面的限制非常多,导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高,那该怎么办呢?办法是:移民!脱离标准流

    css中一共有三种手段,使一个元素脱离标准文档流:

    • (1)浮动
    • (2)绝对定位
    • (3)固定定位

    二.浮动

    1.设置浮动

    浮动是css里面布局最多的一个属性,也是很重要的一个属性。

    float:表示浮动的意思。它有四个值。

    • none: 表示不浮动,默认
    • left: 表示左浮动
    • right:表示右浮动

    浮动的四大特性:

    1.浮动的元素脱标

      所有的标签一旦设置浮动,就能够并排,并且都不区分行内、块状元素,都能够设置宽高

    2.浮动的元素互相贴靠

      如果父元素有足够的空间,那么3哥紧靠着2哥,2哥紧靠着1哥,1哥靠着边。
      如果没有足够的空间,那么就会靠着1哥,如果再没有足够的空间靠着1哥,自己往边靠

    3.浮动的元素有"字围"效果

      所谓字围效果,当div浮动,p不浮动,div遮盖住了p,div的层级提高,但是p中的文字不会被遮盖,此时就形成了字围效果。

    4.收缩的效果

      收缩:一个浮动元素。如果没有设置width,那么就自动收缩为文字的宽度(这点跟行内元素很像)

    2.清除浮动

    为什么要清除浮动?

    在开发中,为了提高开发效率,更好修改页面布局,在页面布局的时候,每个结构中的父元素的高度,我们一般不会设置。

    看一个效果:

    html效果:

    <div class="father">    
            <div class="box1"></div>
            <div class="box2"></div>
            <div class="box3"></div>
    
     </div>
    
      <div class="father2"></div>

    css样式:

     *{
                padding: 0;
                margin: 0;
    
            }
            .father{
                width: 1126px;
                /*子元素浮动 父盒子一般不设置高度*/
    
                /*出现这种问题,我们要清除浮动带来影响*/
                /*height: 300px;*/
    
            }
            .box1{
                width: 200px;
                
                height: 500px;
                float: left;
                background-color: red;
            }
            .box2{
                width: 300px;
                height: 200px;
                float: left;
                background-color: green;
            }
            .box3{
                width: 400px;
                float: left;
                height: 100px;
                background-color: blue;
            }
            .father2{
                width: 1126px;
                height: 600px;
                background-color: purple;
            }

    效果发现:如果不给父盒子一个高度,那么浮动子元素是不会填充父盒子的高度,那么此时.father2的盒子就会跑到第一个位置上,影响页面布局。

    浮动元素确实能实现我们页面元素并排的效果,这是它的好处,同时它还带来了页面布局极大的错乱!!!所以我们要清除浮动

    清除浮动的四种方法:

      1.给父盒子设置高度

        使用不灵活,一般会常用页面中固定高度的,并且子元素并排显示的布局。比如:导航栏

      2.clear:both   内墙法 清除别人对我的浮动影响

        有三个值:

          left:当前元素左边不允许有浮动元素

          right:当前元素右边不允许有浮动元素

          both:当前元素左右两边不允许有浮动元素

          给浮动元素的后面加一个空的div,并且该元素不浮动,然后设置clear:both。

      3.伪元素清除法(常用)

        给浮动子元素的父盒子,也就是不浮动元素,添加一个clearfix的类,然后设置

    .clearfix:after{
        /*必须要写这三句话*/
        content: '.';
        clear: both;
        display: block;
    }

      新浪首页推荐伪元素清除法的写法

     /*新浪首页清除浮动伪元素方法*/
                  content: ".";
                    display: block;
                    height: 0;
                    clear: both;
                    visibility: hidden/*隐藏可见性*/

      4.overflow:hidden

    overflow属性规定当内容溢出元素框时发生的事情。

    说明:

    这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。

    有五个值

    描述
    visible   默认值。内容不会被修剪,会呈现在元素框之外。
    hidden   内容会被修剪,并且其余内容是不可见的。
    scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
    auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
    inherit 规定应该从父元素继承 overflow 属性的值。

    逐渐演变成overflow:hidden清除法。

    其实它是一个BFC区域: https://blog.csdn.net/riddle1981/article/details/52126522

  • 相关阅读:
    mysql的CURRENT_TIMESTAMP【转】
    php开发中emoji表情的问题3种方法轻松处理【转】
    JavaScript 正则表达式【转】
    使用 内置函数strtok()函数实现 loadrunner 字符串替换
    python打开文件失败,报错'gbk' codec can't decode byte 0xbf in position 2: illegal multibyte sequence
    txt文本程序 打开python文件 另存为原来的文件名,不能覆盖原来的文件解决
    linux 文件解压
    tar.xz 解压
    设置xampp开机自动启动
    Can’t connect to local MySQL server through socket的解决方法
  • 原文地址:https://www.cnblogs.com/zwq-/p/9735644.html
Copyright © 2020-2023  润新知