1、清除浮动的方法总结

当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现，就需要清楚浮动。

 清楚浮动的方法：

①：定义父级div的高度。

②：添加一个空div，利用css提供的clear:both清除浮动，让父级div能自动获取到高度 

dom:

<div class="div1">
    <div class="floatLeft"></div>
    <div class="floatRight"></div>
    <div class="clearFloat"></div>
</div>

css:

.clearFloat{
    clear: both;
}

③：在通过伪类清除浮动

dom:

<div class="div1 clear">
    <div class="floatLeft"></div>
    <div class="floatRight"></div>
</div>

css:

.clear:after{
  display:block;
  content:””;
  visibility:hidden;
  clear:both;
  height:0
}
.clear{zoom:1}/*针对IE6、7*/

④：父级div定义overflow：hidden

原理：overflow:hidden属性相当于是让父级紧贴内容,必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度 （缺：不能和psition配合使用，超出的尺寸会被隐藏）

2、CSS实现水平垂直居中方法总结

dom结构：

<body>
    <div class="big">
        <div class="mid"></div>
    </div>
</body>

以下为实现.mid在.big里居中的方法：

 

（一）利用绝对定位+transform（.mid宽高可不固定）

.big{
  position: relative;
  width: 500px;
  height: 400px;
  background: #faebcc;
}
.mid{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
}

(二)利用绝对定位+margin（.mid宽高固定）

.big{
  position: relative;
  width: 500px;
  height: 400px;
  background: #faebcc;
}
.mid{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 80px;
    margin: -40px 0 0 -50px;/*负值取宽、高的一半*/
}

（三）利用定位与margin：auto（.mid宽高固定）

  .big{
    position: relative;
    width: 500px;
    height: 400px;
    background: #faebcc;
  }
  .mid{
    position: absolute;    
    width: 100px;
    height: 80px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }

(四)利用display：table-cell（.mid宽高固定）

    CSS中有一个用于竖直居中的属性vertical-align，但只有 当父元素为td或者th时，这个vertical-align属性
才会生效，对于其他块级元素，例如 div、p等，默认情况下是不支持vertical-align属性的，设置块级元素的
display类型为table-cell，激活vertical-align属性，但display:table-cell存在兼容性问题，
所以这种方法没办法跨浏览器兼容。
  .big{
    display: table-cell;
    vertical-align: middle;/*垂直*/
    text-align: center;/*水平*/
    width: 500px;
    height: 400px;
    background: #faebcc;
}
  .mid{
      display: inline-block;
      width: 100px;
      height: 80px;
      background: greenyellow;
  }
(五)使用flex布局（.min宽高可不固定）
  .big{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 500px;
    height: 400px;
    background: #faebcc;
  }
  .mid {
    width: 100px;
    height: 80px;
    background: greenyellow;
  }

 

 

Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

沃云统一开发平台介绍

沃云集成平台研发平台介绍1.平台优势2.平台原理3.研发平台使用方法4.遇到的问题5.现阶段实现的功能6.后续需要补充的功能和优化内容研发平台介绍1.平台优势解决孤岛式应用，实现能力共享；现有系统框架过于复杂，跨系统业务处理成本居高不下，协同服务共享，降低运维成本；提高项目应用资源监控能力，改善资源利用率；业务微服务化，快速发布、快速部署，快速响应业务需求变化；沃云平台不仅提供了自动化的、可快速部

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生

基于docker的test-containers环境百宝箱

笔者语录： 我开了个公众号【Java你我他】，欢迎大家关注。  在很多时候，程序猿们更关注代码本身，而不愿意把时间花费在环境搭建上，这也是Docker变得越来越受欢迎的原因之一。test-containe是Docker生态圈中的一颗新星，其 主要针对测试领域、背靠Docker实现环境百宝箱功能。  test-containers： 你要的环境，我都有~  假设我们现在需要一个redis-clust

avatar 云原生