html+css 清除浮动的相关技巧心得

1. 清除浮动的概念

在 HTML 中，元素的默认值是不存在浮动（float）的。但因为 float 可以改变元素的位置和形状，所以利用浮动可以实现比较复杂的布局效果。但是，浮动元素也可能会对其他元素产生影响，导致它们的位置错乱，所以需要采用一些技巧来清除浮动的影响。

2. 清除浮动的方法

2.1 父元素添加overflow属性

将父元素设置为overflow: auto或者 overflow: hidden，可以让父元素自动检测内容高度，从而撑开包裹浮动元素的父元素。

.parent {
  overflow: auto;
}

2.2 使用clear属性

使用clear: both属性来清除浮动元素对后面元素的影响。该属性使元素不占据浮动元素下方的空间，即使前面的浮动元素高度很大，也不会对该元素产生影响。

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

我们也可以使用伪元素的方式来实现清除浮动。通过在浮动元素的父元素上添加一个名为clearfix的类，并利用伪元素添加一个空的块级元素，并且清除浮动

.clearfix::after{
    content: "";
    display: block;
    clear: both; 
}

2.3 使用BFC（Block Formatting Context）

利用 BFC 可以让浮动元素的父元素具有“形象实力”，成为一个独立的渲染区域，从而避免它对其他元素造成影响。

.parent {
  overflow: hidden;
}
.parent::after {
  content: "";
  display: table;
  clear: both;
}

3. 避免使用负margin

虽然负margin可以实现某些布局效果，但是如果使用不当就会导致页面上小区域的重叠问题。我们可以使用其他更安全的方法来实现相似的效果。

4. 结语

HTML+CSS 是前端开发的基础，解决布局问题是一个不可避免的问题。通过学习清除浮动的方法，可以更好地掌握浮动布局等技术，让网站更美观、更易用。