版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
一、元素浮动布局效果
元素浮动布局原理
（1）初始状态
（2）浮动布局后
1. 文字环绕效果
（1）效果图
（2）效果实现核心代码
- HTML部分
<p>文字环绕效果</p>
<div class="green"></div>
<div class="red">
1.文字环绕2.文字环绕3.文字环绕4.文字环绕5.文字环绕6.文字环绕7.文字环绕8.文字环绕9.文字环绕10.文字环绕
</div>
- CSS部分
.green{
width: 100px;
height: 100px;
background-color: green;
float: left; /*使用浮动布局*/
}
.red{
width: 200px;
height: 150px;
background-color: red;
}
（3）说明
浮动元素会脱离网页文档，与其他元素发生重叠。但是，不会与文字内容发生重叠。
2. 横向排版布局效果
（1）效果图
（2）效果实现核心代码
- HTML部分
<p>横向排版布局效果</p>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
- CSS部分
.a{
width: 200px;
height: 200px;
background-color: green;
}
.b{
width: 600px;
height: 200px;
background-color: red;
}
.c{
width: 400px;
height: 200px;
background-color: blue;
}
.a,.b,.c{
float: left;
}
二、消除浮动布局对之后元素的影响
效果变换：
（1）变换前
效果代码
- HTML部分
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
- CSS部分
.a{
width: 200px;
height: 200px;
background-color: green;
}
.b{
width: 600px;
height: 200px;
background-color: red;
}
.c{
width: 400px;
height: 200px;
background-color: blue;
}
.d{
width: 1200px;
height: 400px;
background-color: gray;
}
.a,.b,.c{
float: left;
}
（2）变换后
1. 方法一：在使用了浮动布局元素的外层嵌套一个div
（1）效果实现核心代码
- HTML部分
<div class="outer">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<div class="d"></div>
- CSS部分
.outer{
/* height: 200px; */
overflow: auto; /*此语句等同于上一句的height:200px，将outer这个div的高度撑起来，否则outer这个div的高度为0*/
}
2. 方法二：在浮动布局元素之后元素的样式中加上clear
clear:left/right/both（表示该元素不受左/右/左右浮动的影响）
（1）效果实现核心代码
- HTML部分
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
- CSS部分
.d{
width: 1200px;
height: 400px;
background-color: gray;
clear: left;
}
3. 实例：聊天对话框
（1）页面效果
（2）效果实现代码
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html,body{
height: 100%;
}
body{
margin: 0;
}
ul{
width: 300px;
height: 500px;
border: #000000 1px solid;
border-top: none;
border-bottom: none;
list-style: none;
margin: 0;
padding: 0;
}
ul li:nth-of-type(odd){
height: 30px;
margin: 15px 0;
box-shadow: 0px 0px 5px lightgray ;
border-radius: 5px;
background-color: lightgray;
line-height: 30px;
padding: 0 5px;
margin-left: 5px;
float: left;
clear: both;
}
ul li:nth-of-type(even){
height: 30px;
margin: 15px 0;
box-shadow: 0px 0px 5px lightgreen ;
border-radius: 5px;
background-color: lightgreen;
line-height: 30px;
padding: 0 5px;
margin-right: 5px;
float: right;
clear: both;
}
div#all{
width: 300px;
margin: auto;
position: relative;
top: 15px;
}
div#name{
height: 40px;
border: #000000 1px solid;
width: 290px;
line-height: 40px;
font-size: 18px;
padding: 0 5px;
}
div#name span{
float: right;
padding: 0 15px;
}
div#send{
width: 300px;
border: #000000 1px solid;
background-color: #D3D3D3;
}
div#send input{
margin: 5px 5px;
padding: 5px 0;
width: 220px;
outline: none;
}
div#send input#bt{
width: 50px;
}
#bt:hover{
cursor: pointer;
}
</style>
<script type="text/javascript">
var num;
function sendmsg(){
var text=document.getElementById("text").value;
num=text;
var insertHtml="<li>"+text+"</li>";
document.getElementById("list").innerHTML=document.getElementById("list").innerHTML+insertHtml;
document.getElementById("text").value="";
var most=document.getElementById("list").getElementsByTagName("li").length;
if(most>=8)
{
var list = document.getElementById("list");
list.removeChild(list.childNodes[1]);
list.removeChild(list.childNodes[2]);
}
}
function returnmsg(){
var length = num.length+1;
var insertHtml="<li>"+num+length+"</li>";
document.getElementById("list").innerHTML=document.getElementById("list").innerHTML+insertHtml;
}
</script>
</head>
<body>
<div id="all">
<div id="name">< 是月流光<span>···</span></div>
<ul id="list">
<li>1</li>
<li>12</li>
<li>123</li>
</ul>
<div id="send">
<input type="text" id="text"/>
<input type="button" id="bt" value="发送" onmousedown="sendmsg()" onmouseup="returnmsg()" />
</div>
</div>
<script type="text/javascript" color="red" opacity='0.7' zIndex="0" count="100" src="https://blog-static.cnblogs.com/files/huigee/canvas-nest.js"></script>
<!--磁铁线条效果-->
</body>
</html>
三、浮动元素的排列规律
浮动元素在排列时，只参考前一个元素即可。
（1）第一种情况（向左浮动）
（2）第二种情况（向左浮动）
四、浮动元素的重叠问题
1. 浮动元素不会覆盖文字内容
2. 浮动元素不会覆盖图片内容（因为图片本身也属于文本，可以将图片看作是特殊的文字）
3. 浮动元素不会覆盖表单元素（输入框、单选按钮、复选框、按钮、下拉选择框等）
