元素居中的方法
- 定位：使用父相子绝定位布局，然后子元素偏移即可
.father {
position: relative;
}
.child {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* 或者 偏移自身大小一半的位置
margin-top: -50px;
margin-left: -50px;
*/
/* 或者 盒子有宽高的情况下，设置四方向为0 margin自动
top\left\right\botton: 0;
margin: auto;
*/
}
- flex 布局：主轴和侧轴同时居中即可
.father {
display: flex;
justify-content: center;
align-items: center;
}
.child {
width: 50px;
height: 50px;
background-color: red;
}
清除浮动的方法
CSS 浮动是一种用于布局的技术，它可以让元素脱离文档流并向左或向右浮动，从而让其他元素环绕其周围。
浮动的原因是因为浮动元素被从文档流中移除，并且它们的位置是相对于其包含块的左右边缘进行定位的。这意味着浮动元素将不占据其包含块中的空间，而其他元素将会围绕它们进行布局。
为了清除浮动，可以使用以下方法之一：
- clear属性：在浮动元素的下方添加一个空元素，然后将其设置为clear:both。这将强制浮动元素下方的元素开始在新的行上排列。
- 使用overflow属性：将包含浮动元素的容器设置为overflow:auto或overflow:hidden。这将创建一个新的BFC（块级格式化上下文），并强制容器包含浮动元素。
- 使用伪元素：将浮动元素的容器设置为position:relative，然后在容器的末尾添加一个伪元素（例如，::after），并将其清除浮动。这将在浮动元素的下方创建一个空元素，并强制将其包含在容器中。
例如，以下是使用clear属性清除浮动的示例：
<div class="container">
<div class="float-left">浮动元素</div>
<div class="clear"></div>
</div>
.float-left {
float: left;
}
.clear {
clear: both;
}
隐藏元素方法
隐藏元素是指在网页上不显示该元素，但仍保留该元素的空间。常见的隐藏元素的方法包括：
- display: none;：这是最常见和最简单的隐藏元素的方法。它会将元素从文档流中移除，并且不会在页面上占用任何空间。但是，该元素的所有后代元素也会被隐藏。
- visibility: hidden;：这个属性也可以隐藏元素，但是与display: none;不同的是，该元素仍然占据页面上的空间。它只是不可见而已，但是该元素的后代元素仍然可以显示。
- opacity: 0;：这个属性可以将元素的透明度设置为0，使其完全透明并且不会显示在页面上。但是，与display: none;不同的是，该元素仍然占据页面上的空间。
- position: absolute; left: -9999px;：这个属性可以将元素移动到页面外面，使其不可见。但是，该元素仍然占据页面上的空间。
需要注意的是，以上这些方法都只是隐藏元素，而不是删除元素。如果需要完全删除元素，可以使用JavaScript或服务器端代码来实现。此外，隐藏元素的方法也有一些局限性，例如可能会影响可访问性和SEO。因此，在使用这些方法时需要谨慎考虑。
