<!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)清完兄弟间浮动后如上: