zoukankan      html  css  js  c++  java
  • 浮动塌陷

    浮动塌陷

     

      使用浮动(float)的一个比较疑惑的事情是他们怎么影响包含他们的父元素的。如果父元素只包含浮动元素,且父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零。如果父元素不包含任何的可见背景,这个问题会很难被注意到,但是这是一个很重要的问题。在这里我们可以称为“塌陷”。如下图:

    复制代码
        <style type="text/css">
            .box{border: 2px solid blue}
            .box1{ 50px;height: 50px;border: 1px solid red;background: yellow;float: left}
            .box2{ 100px;height: 100px;border: 1px solid red;background: red;float: left}
            .box3{ 300px;height: 300px;border: 1px solid red;background: green;float: left}
        </style>
    </head>
    <body>
        <div class="box">
            <div class="box1"></div>
            <div class="box2"></div>
            <div class="box3"></div>
        </div>
    </body>
    复制代码

      解决塌陷有以下三种方法:

    一、在使用float元素的父元素结束前加一个高为0宽为0且有clear:both样式的div 

    复制代码
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            .box{border: 2px solid blue}
            .box1{ 50px;height: 50px;border: 1px solid red;background: yellow;float: left}
            .box2{ 100px;height: 100px;border: 1px solid red;background: red;float: left}
            .box3{ 300px;height: 300px;border: 1px solid red;background: green;float: left}
        </style>
    </head>
    <body>
        <div class="box">
            <div class="box1"></div>
            <div class="box2"></div>
            <div class="box3"></div>
            <div style="clear: both"></div>
        </div>
    </body>
    复制代码

    二、在使用float元素的父元素添加overflow:hidden;

    复制代码
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            .box{border: 2px solid blue;overflow: hidden}
            .box1{ 50px;height: 50px;border: 1px solid red;background: yellow;float: left}
            .box2{ 100px;height: 100px;border: 1px solid red;background: red;float: left}
            .box3{ 300px;height: 300px;border: 1px solid red;background: green;float: left}
        </style>
    </head>
    <body>
        <div class="box">
            <div class="box1"></div>
            <div class="box2"></div>
            <div class="box3"></div>
        </div>
    </body>
    复制代码

    三、after,所谓after,就是指标签的最后一个子元素的后面。

    复制代码
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            .box{border: 2px solid blue;zoom:1;}
            .box:after{clear: both;display: block;line-height: 0;visibility: hidden;content: 'clear'}
            .box1{ 50px;height: 50px;border: 1px solid red;background: yellow;float: left}
            .box2{ 100px;height: 100px;border: 1px solid red;background: red;float: left}
            .box3{ 300px;height: 300px;border: 1px solid red;background: green;float: left}
        </style>
    </head>
    <body>
        <div class="box">
            <div class="box1"></div>
            <div class="box2"></div>
            <div class="box3"></div>
        </div>
    </body>
  • 相关阅读:
    yum -y list java* 查看当前java的版本
    max number of threads [1024] for user [lish] likely too low, increase to at least [2048]
    max file descriptors [4096] for elasticsearch process likely too low, increase to at least [65536]
    max virtual memory areas vm.max_map_count [65530] likely too low, increase to at least [262144]
    linux文件描述符open file descriptors与open files的区别
    samba 报错
    检测端口是否开启
    sqlserver2008出现数据库主体在该数据库中拥有架构,无法删除的解决方案
    sqlserver生成表结构文档的方法
    胡萝卜周博客 软件下载
  • 原文地址:https://www.cnblogs.com/liunaiming/p/13238138.html
Copyright © 2011-2022 走看看