之前对CSS的浮动布局总是一知半解，最近开发中用的多了，对它的用法进行一些总结，以便以后忘记时可以查到。哈哈，别说我记性不好，我可是说真的，毕竟前端的知识实在是多而杂，多做笔记，遇到问题时网上搜索资料是其一，但我觉得更重要的是把你遇到的问题和解决方法记录下来。。这样以后你的开发效率是多高。言归正传，对浮动进行一些记录。
1.首先，网页是一个文档流，默认按块元素和级联元素从左到右，从上至下的依次显示。而Float浮动元素，就好比是漂浮在了文档流之上，不占据文档流的位置。
如下就是不进行任何浮动的文档页面：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style rel="stylesheet">
.content{
width: 500px;
border: 1px solid red;
background: cornflowerblue;
height: 400px;
}
.boat{
width: 100px;height: 100px;
background: red;
border: 1px solid #f7ffec;
}
.nofloat{
height: 50px;
background: yellow;
border: 1px solid #195dff;
}
</style>
</head>
<body>
<div class="content">
<div class="nofloat"> 我占据父级的一整行</div>
<div class="boat">我是漂浮的小船 现在没浮动</div>
<div class="boat">我是漂浮的小船 现在没浮动</div>
<div class="boat">我是漂浮的小船 现在没浮动</div>
</div>
</body>
</html>
2.接下来我们把小船进行浮动，左浮动右浮动都行。效果如下：
.boat{
width: 100px;height: 100px;
background: red;
border: 1px solid #f7ffec;
float: left;
}
可以清楚的看到，当浮动元素的兄弟元素（同级元素）独占一行或者预留的空间不足时，浮动元素会换行浮动。浮动是相对的，是相对其直接父级元素浮动，如在此处，.boat是相对于.content浮动的，可以用此来进行响应式布局，相对于父元素宽高的百分比。另外，如果不想让浮动元素不浮动在一行或者相邻，可以让后来的浮动元素不浮动去靠着之前浮动好了的元素，什么意思呢？就是如果小船3说小船1和2太烦了，不想浮动在他门后面，这时他可以告诉上帝（浏览器说）我的左边不能有浮动，代码为：
.boat:last-child{
clear: left;
}
注意：因为这些类名都相同，所以用.boat:last-child选择最后一个DOM元素，当然也可以为三个小船设置不同的class类名。
效果如下：
同理：一个浮动元素如果不想让其右边右浮动元素，也可以在右边的浮动元素上加上clear:left或者right。注意，不是在本身加，而是在原本挨着但是现在想踢开的那个元素上加。还有也可以不让左右两边有浮动的元素，利用clear:both；
个人理解的总结，如有错误之处，欢迎指正
时间： 2024-10-09 23:23:19