您的位置：首页 > Web前端 > HTML5

HTML5学习_day05(7)--html之布局中使用浮动带来的问题

2016-09-26 19:13 561 查看

<!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 float问题

相关文章推荐

新的分享

章节导航