<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>解決float帶來的佈局問題</title>
<style type="text/css">
.div1{
width: 600px;
/*height: 400px;*/
/*float: left;*/
/*display: inline-block;*/
/*margin:10px auto; */ /*設置了內斂標籤後 margin左右無效 duv1不能水平居中*/
border:4px solid red;
/*clear: both;*/
}
.div2{
width: 300px;
height: 200px;
background-color: blue;
float: right;
}
.div3{
width: 600px;
height: 50px;
background: blueviolet;
/*float:right;*/
}
.clear{
clear: both;
}
</style>
</head>
<body>
<!--解決方法：
1.讓父級元素也浮動（這樣要把子級所有元素都要浮動纔會破壞原佈局）
弊端：這樣做，如果要保留文檔流的問題，也要跟着設置浮動。
父級左右margin會失效。
注意：如果父級元素有浮動，子級就可以不用做清除浮動的操作。
<div class="div1">
<div class="div2"></div>
<div class="div3"></div>
</div>-->
2.給父級加display:inline-black;
<!--弊端：父級左右邊距不可以設置 margin:0xp auto;
<div class="div1">
<div2 class="div2"></div2>
</div>
3.給父級一個高度
弊端：不利於擴展，也就是說，子級元素的高度發生了變化，也要去同時去修改父級元素的高度。
注意：這樣做也是不需要子級清除浮動來保持原有佈局的。
4.給父級元素加overflow:hidden;（margin左右有效）
5.利用標籤清清除動。
用法：在浮動元素後面加一個空標籤，給這個標籤設置一個樣式 .class{clrar:both;}
注意：一定要再浮動元素後面加一個空標籤。不是設置在浮動元素裏面的屬性這樣清除沒有作用 一定要浮動元素後面添加一個空標籤 只用於清除前一個元素的浮動。自身浮動元素不可以再用來座位清除浮動。
-->
<div class="div1">
<div class="div2"></div>
<!--加一個空的div座位清除浮動來用 一定要在浮動元素後面加-->
<div class="clear"></div>
<div class="div3"></div>
</div>
</body>
</html>
HTML5學習_day05(7)--html之佈局中使用浮動帶來的問題
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
HTML5學習_day05(1)--html浮動之文檔佈局
文檔佈局的4種方式： 1.流式佈局(自然佈局) 特點：沒有任何修飾(沒有定位float 定位 彈性)的佈局，也就是元素在排版過程中，元素從上到下，從左到右的流式排列，遇塊(塊級元素)換行等。
HTML5學習_day05(6)--html之佈局中使用浮動帶來的問題
問題1: 如果兩個相鄰兄弟塊級元素，給第一個元素float，那麼後面的未設置float的塊級元素就會無視這個浮動元素的存在，佔據浮動元素原有的空間，發生了佈局的重疊。 問題2.