浮动与清除
在 CSS 中，浮动（float）和清除（clear）是用于控制元素布局和元素之间关系的重要属性，通过合理使用浮动和清除属性，可以实现灵活多样的页面布局效果，确保元素的正确显示和布局。
笔记内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
div{
/* 浮动：目的是让多个块元素在一行内显示 */
/*
浮动后元素会 脱离文档流，且会让元素自动转换为 行内块元素；
即如果行内元素被设置了浮动，此时不需要给元素设置为 inline-block，元素就会有宽高。
而如果 div 被设置了浮动，就不会占一行了，而是会根据里面内容自动调整宽度，如果里面没内容，div 不会显示出来。
让 ul 中的 li 在一行显示，除了设置 li 为 inline-block，还可以设置 li 为浮动，推荐用浮动替代 inline-block。
元素设置浮动后，再设置 margin:0 auto 就不会起作用，即居中失效（但设置 margin:10px 这样的还是起作用的），这时候参考 “定位盒子的居中对齐”；
*/
/*
浮动的两个元素，以最上边对齐；
浮动的两个元素之间没有水平间距，紧靠在一起；
浮动的元素不会超出到父元素的 padding 范围里；
*/
/*
虽说浮动的元素会脱离文档流，但不是真正的完全脱标，比如:
有 A/B 两个一样大的并列的盒子，当 A 盒子浮动，B 盒子不浮动时，A 盒子会覆盖 B 盒子，到此为止没问题.
可如果 B 盒子里面有文字，此时 A 盒子虽然能覆盖 B 盒子，但是 B 盒子里的文字却会在 A 盒子下方显示出来，不会被遮挡住.
针对这种情况，最好用绝对定位，设置A盒子绝对定位，这样 A 盒子就会完全脱标，遮盖住 B 盒子及其里面的文字。
*/
float: none; /*不浮动*/
float:left; /*左浮动*/
float:right; /*右浮动*/
}
/* 如果清除了浮动，父亲会自动检测孩子的高度 */
/* 清除浮动：主要为了解决父级元素（没有设置高度）因为子级元素浮动而引起内部高度为 0 的问题 */
div{
/* 1、额外标签法：给父盒子的最后再给一个空 div，然后对这个空 div 清除左右浮动，这样父盒子就可以有宽高了；缺点：添加许多无意义标签，结构化差 */
clear: both; /* 清除两边的浮动元素，一般用这个比较多 */
clear: left; /* 清除左边的浮动元素 */
clear: right; /* 清除右边的浮动元素 */
/* 2、对父盒子设置 overflow:hidden，缺点：超出父盒子部分无法显示 */
overflow: hidden;
}
/* 3、使用 after 伪元素清除浮动：.clearfix 是类选择器名 */
/* 将 clearfix 类名添加到需要清除浮动的盒子上，一般为添加在父盒子上面 */
.clearfix:after{
content:"";display: block;height: 0;clear: both;visibility: hidden;
}
.clearfix{*zoom:1;} /* IE6/7 专用（除了 IE 浏览器，其他任何浏览器碰到 zoom 前面的星号，都会忽略其后面的内容） */
/* 4、双伪元素清除浮动 */
/* 将 clearfix 类名添加到需要清除浮动的盒子上，一般为添加在父盒子上面 */
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {*zoom: 1;} /* IE6/7专用（除了IE浏览器，其他任何浏览器碰到zoom前面的星号，都会忽略其后面的内容） */
</style>
</head>
<body>
<div class="first">
</div>
<div class="second">
</div>
<div class="third">
</div>
</body>
</html>
