浮动布局
2018-11-03 本文已影响0人
wijgat
浮动——float属性
属性功能
设置一个元素发生浮动，浮动后的元素默认大小为内容大小，并且可以设置宽高，也可以与其他浮动元素或行元素处于同一行。
为何要浮动？
块元素能够设置宽高，但是默认独占一行；行元素默认是内容撑开宽高的，虽然某个行元素能够和其他行元素处于同一行，但是并不能设置宽高。因此，如果希望既能够设置宽高又能够与其他元素处于同一行，就需要使用到浮动。
代码示例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>前端学习</title>
<style>
.box1 {
float: left;
width: 100px;
height: 100px;
background: #f00;
}
.box2 {
float: left;
width: 100px;
height: 100px;
background: #0f0;
}
.box3 {
float: left;
width: 100px;
height: 100px;
background: #00f;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
显示效果
浮动特性小结
- float: left; 表示向左浮动，标签（或元素）从右边向上浮起，再从右向左浮动到左边；
- float:right; 表示向右浮动，标签从左边向上浮起，再从左向右浮动到右边；
- 在浮动过程中，如果遇到同方向的其他元素，有可能会被“阻碍”；
- 在浮动过程中，左浮动的元素和右浮动的元素相互不影响对方运动；
浮动的影响
对父级元素的影响：
父元素本该由内容撑开高度，内部元素进行浮动之后，父级元素相当于少了内容，导致浮动元素不再对其父级元素高度产生影响。
代码示例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>前端学习</title>
<style>
.wrap {
border: 10px solid #000;
}
.box {
float: left;
width: 100px;
height: 100px;
background: #f00;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
</html>
显示效果
对兄弟元素的影响
代码示例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>前端学习</title>
<style>
.wrap {
border: 5px solid #000;
}
.box1 {
width: 500px;
height: 300px;
background: #f00;
}
.box2 {
float: left;
width: 200px;
height: 200px;
background: #0f0;
}
.box3 {
width: 500px;
height: 300px;
background: #00f;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1">第一个div</div>
<div class="box2">第二个div,设置浮动</div>
<div class="box3">第三个div</div>
</div>
</body>
</html>
显示效果
