一、元素浮動佈局效果
元素浮動佈局原理
（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. 浮動元素不會覆蓋表單元素（輸入框、單選按鈕、複選框、按鈕、下拉選擇框等）
