清除浮动和元素居中

最新推荐文章于 2022-04-12 20:30:35 发布

st_Jin

最新推荐文章于 2022-04-12 20:30:35 发布

阅读量224

点赞数

分类专栏： # HTML+CSS相关

本文链接：https://blog.csdn.net/st_Jin/article/details/116300999

版权

HTML+CSS相关专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中清除浮动的四种方法，包括加高法、clear:both、overflow:hidden和隔墙法，并分别展示了它们的优缺点。接着，文章探讨了元素的居中布局，包括水平居中、垂直居中以及水平垂直绝对居中的多种实现方式，如margin auto、position absolute结合transform等。这些技巧对于前端开发者来说是日常工作中必不可少的知识点。

摘要由CSDN通过智能技术生成

文章目录

清除浮动的方法

加高法——给祖先元素一个高度
浮动的元素只能被有高度的盒子关住，缺点：麻烦且不能适应页面的变化
clear:both——写在要清除浮动的盒子上
缺点：margin属性会失效
overflow:hidden——写在浮动元素的父级上
正常情况下，父级不会被浮动的子级撑出高度，但有了这个属性，父级可以被撑出高度，margin依然有效
隔墙法——在浮动元素之间放一个块级元素
可放在浮动的盒子里面，这样它也能被撑出高度；或放在两个盒子之间，但这样浮动盒子没有高度

元素居中

//html结构
<div class="parent">
    <div class="child">dfdf</div>
 </div>

水平居中

宽度确定

//margin:0 auto
<div style="width:300px;height: 100px;border: 1px solid #f00;">
    <div style="width: 100px;height: 20px;background-color: #0f0;margin: 0 auto;"></div>
</div>

//position + margin + left
.parent {
      width: 400px;
      height: 100px;
      background: #bbb;
      position: relative;
    }
    .child {
      width: 200px;
      height: 100px;
      background: #333;
      position: absolute;
      left: 50%;
      margin-left: -100px;
    }

垂直居中

高度确定，适用于行级元素

//height + line-height
.parent {
      width: 400px;
      height: 200px;
      background: #bbb;
      line-height: 200px;
    }

水平垂直绝对居中

//1. position+ transform
.parent {
      width: 400px;
      height: 100px;
      background: #bbb;
      position: relative;
    }
    .child {
      width: 100px;
      height: 100px;
      background: #333;
      position: absolute;
      left: 50%;
      top:50%
      transform: translate(-50%,-50%);
    }

//2. 弹性布局
.parent {
      width: 400px;
      height: 200px;
      background: #bbb;
      display: flex;
      justify-content: center;
      align-items: center;
    }

//3. display + (text-align+inline-block) + vertical-align
.parent {
      width: 400px;
      height: 200px;
      background: #bbb;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }
    .child {
      width: 100px;
      height: 100px;
      background: #333;
      display: inline-block;
    }

//4. position + margin
.parent {
      width: 400px;
      height: 200px;
      background: #bbb;
      position: relative;
    }
    .child {
      width: 100px;
      height: 100px;
      background: #333;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
    }

auto：表示剩余空间自动分配。

块级元素在水平方向自动填充一整行，而在垂直方向上不会自动填充。
所以给块级元素设置margin:auto时，块级元素在水平方向上，左右的margin平分剩余空间，在垂直方向上，没有剩余空间可平分，所以呈现只有水平居中的效果

还可以利用auto达到一个浮动的效果

//类似于float:right
  width: 400px;
      height: 200px;
      background: #bbb;
      position: relative;
    }
    .child {
      width: 100px;
      height: 100px;
      background: #333;
      margin-left: auto;
    }