该博客探讨了HTML5中浮动元素（如float:left或float:right）对页面布局的影响，包括元素脱离文档流、兄弟元素位置变化和父级元素高度不被撑开的问题。文章提供了两种解决方法：一是使用overflow:hidden清除浮动；二是使用clear:left或clear:right。通过实例代码展示了如何应用这两种方法，以保持布局的正常显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
width: 200px;
height: 200px;
background-color: red;
margin: 10px;
/*添加左浮动*/
float: left;
/*float: right;*/
}
.div2{
width: 200px;
height: 200px;
background-color: cyan;
margin: 10px;
float: left;
/*float: right;*/
}
.div3{
width: 200px;
height: 200px;
background-color:orange;
margin: 10px;
float: left;
/*float: right;*/
}
.father{
width: 700px;
margin: 0 auto;
}
/*
浮动元素的核心思想
1.浮动会让标签的布局脱离原来默认的文档流布局方式；
2.浮动会让块元素失去独占一行的特性，在浮动这一层的标签可以共用一行；
3.浮动标签后面布局的标签会忽略浮动标签原来所占据的空间；
4.浮动元素（只要一个标签加了一个float,他就叫浮动标签或浮动元素）；
5.浮动元素默认内容撑开宽高；
6.浮动元素标签会发生层叠，但内容不会。
*/
</style>
</head>
<body>
<div class="father">
<div class="div1">我是div1</div>
<div class="div2">我是div2</div>
<div class="div3">我是div3</div>
</div>
</body>
</html>
但浮动会让块标签脱离原来默认文档流，即浮了起来，对其他没有浮动的标签产生影响，例如，让其兄弟标签自动占据它原先没有浮动时的位子，也会让他的父级标签不能被自动撑开高度，因为浮动标签已经没有高度了如何解决呢？以下时我的解决方法：
1.解决父子之间的浮动问题
方法一：浮动清浮动；
方法二：overflow: hidden;清浮动。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.father{
width: 200px;
margin: 0 auto;
border: 10px solid black;
方法一：/*overflow: hidden;*/
方法二：/*float: left;*/
}
.one{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.two{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.three{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
.four{
width: 100px;
height: 100px;
background-color: yellow;
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.div1{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.div2{
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
.div3{
width: 200px;
height: 300px;
background-color: yellow;
clear: left;
}
</style>
</head>
<body>
<div class="div1"> </div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
(2)清完兄弟间浮动后如上：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
