CSS浮动(float)
一 传统网页布局的几种方式
网页布局的本质:用 CSS 来摆放盒子,把盒子摆放到相应位置。
CSS 提供了多种布局方式(简单说就是盒子如何进行排列)。
- 普通流(标准流)
- 浮动
- 定位
- 弹性盒子
- table布局
二 标准流(普通流/文档流)
所谓的标准流:就是标签按照规定好的默认方式排列。
块级元素会独占一行,从上向下顺序排列。
行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行。
以上都是标准流布局,标准流是最基本的布局方式。
这三种布局方式都是用来摆放盒子的,盒子摆放到合适位置,布局自然就完成了。
注意: 实际开发中,一个页面基本都包含了这几种布局方式 。
三 为什么需要浮动?
抛个问题:我们用标准流能很方便的实现如下效果吗?
1、如何让多个块级盒子(div)水平排列成一行?
比较难,虽然转换为行内块元素可以实现一行显示,但是每个盒子之间会有大的空白缝隙,难以控制。
尝试一下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
div {
width: 150px;
height: 150px;
background-color: pink;
display: inline-block;
/* 行内块中间有缝隙 */
}
</style>
</head>
<body>
<div>box1</div>
<div>box2</div>
<div>box3</div>
</body>
</html>
2、如何实现两个盒子的左右对齐?
到这里,我们总结一下: 有很多的布局效果,标准流没有办法完成,此时就可以利用浮动完成布局。 因为浮动可以改变元素标签默认的排列方式。
浮动最典型的应用:可以让多个块级元素在一行内排列显示。
网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动!
尝试一下多个盒子在一行排列吧!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 150px;
height: 150px;
float: left;
}
.box1 {
background-color: pink;
}
.box2 {
background-color: lightpink;
}
.box3 {
background-color: deeppink;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
四 什么是浮动?
float
属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法:选择器 { float: 属性值;}
属性 | 描述 |
---|---|
none | 默认值,不设置浮动 |
left | 元素设置左浮动 |
right | 元素设置右浮动 |
五 浮动特点(重点记忆)
加了浮动之后的元素,会具有很多特性。
- 浮动元素会脱离标准流(脱标)
- 浮动的元素会一行内显示并且元素顶部对齐
- 浮动的元素会具有行内块元素的特性
接下来依次了解以上特点
(1)浮动元素会脱离标准流(脱标)
- 脱离标准流的控制(浮) 移动到指定位置(动),(俗称脱标)
- 浮动的盒子不再保留原先的位置
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>脱标</title>
<style>
.box1 {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.box2 {
width: 300px;
height: 300px;
background-color: gray;
}
</style>
</head>
<body>
<div class="box1">设置了浮动的盒子</div>
<div class="box2">标准流的盒子</div>
</body>
</html>
(2)浮动的元素会一行内显示并且元素顶部对齐
- 如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并且顶端对齐排列。
- 浮动的元素是互相贴靠在一起的(不会有缝隙),如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动元素一行显示</title>
<style>
div {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.two {
background-color: skyblue;
height: 249px;
}
.four {
background-color: skyblue;
}
</style>
</head>
<body>
<div>1</div>
<div class="two">2</div>
<div>3</div>
<div class="four">4</div>
</body>
</html>
当父级元素宽度装不下浮动的盒子,例如缩小浏览器窗口,浮动的盒子换行显示。
(3)浮动的元素会具有行内块元素的特性
任何元素都可以浮动。不管原先是什么模式的元素,添加浮动之后具有行内块元素相似的特性。
块级盒子:没有设置宽度时默认宽度和父级一样宽,但是添加浮动后,它的大小根据内容来决定
行内盒子:宽度默认和内容一样宽,直接设置高宽无效,但是添加浮动后,它的大小可以直接设置
浮动的盒子中间是没有缝隙的,是紧挨着一起的
即:默认宽度由内容决定,同时支持指定高宽,盒子之间无空隙
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动的元素具有行内块元素特点</title>
<style>
/* 通配符选择器 清除默认margin样式*/
* {
margin: 0px;
}
span,
div {
float: left;
width: 200px;
height: 100px;
background-color: pink;
}
p {
float: right;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<span>span1</span>
<span>span2</span>
<div>div</div>
<p>仅又为,老说中,与。</p>
</body>
</html>
注意:p 标签自带外边距 > span div 自带的外边距,先清除标签默认样式,否则可能顶部没有对齐。
六 浮动元素经常和标准流父级搭配使用
为了约束浮动元素位置,我们网页布局一般采取的策略是:
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置。符合网页布局第一准侧。
七 尝试
接下来尝试使用浮动(float)吧!!
1.w3导航条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>w3导航条</title>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
}
/* 版心
width: 900px-1200px
*/
.w{
width: 1200px;
margin: 0 auto;
}
.nav{
height: 48px;
background-color: rgb(232,231,226);
margin-top: 50px;
}
.nav>li{
float: left;
width: 14.2%;
line-height: 48px;
text-align: center;
}
.nav>li:hover{
background-color: rgb(62,63,64);
}
.nav>li:hover>a{
color: white;
}
.nav>li>a{
color: rgb(120,119,119);
font-size: 18px;
}
</style>
</head>
<body>
<ul class="nav w">
<li>
<a href="#">HTML/CSS</a>
</li>
<li>
<a href="#">Browser Side</a>
</li>
<li>
<a href="#">Server Side</a>
</li>
<li>
<a href="#">programming</a>
</li>
<li>
<a href="#">xml</a>
</li>
<li>
<a href="#">web building</a>
</li>
<li class="h">
<a href="#">reference</a>
</li>
</ul>
</body>
</html>
2.简单的网页布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
header {
width: 800px;
margin: 0 auto;
height: 100px;
background-color: green;
}
main {
width: 800px;
margin: 0 auto;
height: 400px;
background-color: orange;
}
footer {
width: 800px;
margin: 0 auto;
height: 100px;
background-color: green;
}
.left {
width: 180px;
height: 400px;
background-color: orchid;
float: left;
}
.center {
width: 400px;
height: 400px;
background-color: paleturquoise;
float: left;
margin: 0 20px;
}
.right {
width: 180px;
height: 400px;
background-color: orchid;
float: left;
}
</style>
</head>
<body>
<header></header>
<main>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</main>
<footer></footer>
</body>
</html>