[华为云在线课程][大话CSS][学习笔记][第5章][CSS浮动]
【摘要】 5.1,浮动 什么叫浮动浮动是指将元素脱离文档流向左或者向右布局使用float属性来设置元素的浮动默认值为none,也就是不浮动还可以设置为left,表示向左浮动;或设置为right,表示向右浮动 浮动的特点一旦对元素设置浮动后,无论之前元素是内联元素还是块级元素,都会被当作块级元素处理一旦对元素设置浮动之后,该元素便会脱离标准流,会造成其父元素的内容塌陷 例如.box{ float...
5.1,浮动
什么叫浮动
- 浮动是指将元素脱离文档流向左或者向右布局
- 使用float属性来设置元素的浮动
- 默认值为none,也就是不浮动
- 还可以设置为left,表示向左浮动;或设置为right,表示向右浮动
浮动的特点
- 一旦对元素设置浮动后,无论之前元素是内联元素还是块级元素,都会被当作块级元素处理
- 一旦对元素设置浮动之后,该元素便会脱离标准流,会造成其父元素的内容塌陷
例如
.box
{
float: left;
}
.box1
{
float: right;
}
.box2
{
float: none;
}
例子
<!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>
.box
{
border: 1px solid black;
}
.swim
{
width: 100px;
height: 100px;
background-color: yellow;
float: left;
}
</style>
</head>
<body>
<div class="box">一天到晚游泳的鱼
<div class="swim">我就是我</div>
</div>
</body>
</html>
5.2,清除浮动
为什么要清除浮动
- 元素设置为浮动时引起的父元素内容塌陷,影响布局效果
clear属性
- clear属性用于设置元素哪一侧不允许浮动
- 默认值为none,表示不进行控制
- 当设置为left时,表示左侧不允许浮动
- 当设置为right时,表示右侧不允许浮动
- 当设置为both时,表示两侧都不允许浮动
overflow属性
- overflow属性用于设置元素不够容纳内容时的显示方式
- 默认值为visible
- 当值为auto时,自动添加滚动条
- 当值为hidden时,会用匿藏掉超出的内容
- 当值为scroll时,会一直显示滚动条
例子
<!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>
.box
{
border: 1px solid black;
width: 500px;
/* height: 50px;*/
overflow: auto;
}
.left
{
width: 200px;
height: 200px;
background-color: yellow;
float: left;
}
.right
{
width: 200px;
height: 200px;
background-color: green;
float: right;
}
.clear
{
clear: both;
}
</style>
</head>
<body>
<div class="box">
<div class="left">我是正在游泳的left</div>
<div class="right">我是正在游泳的right</div>
<!-- <div class="clear"></div> -->
</div>
<!-- <div class="box">
华为技术有限公司,成立于1987年,总部位于广东省深圳市龙岗区。 [1] 华为是全球领先的信息与通信技术(ICT)解决方案供应商,专注于ICT领域,坚持稳健经营、持续创新、开放合作,在电信运营商、企业、终端和云计算等领域构筑了端到端的解决方案优势,为运营商客户、企业客户和消费者提供有竞争力的ICT解决方案、产品和服务,并致力于实现未来信息社会、构建更美好的全联接世界。2013年,华为首超全球第一大电信设备商爱立信,排名《财富》世界500强第315位。华为的产品和解决方案已经应用于全球170多个国家,服务全球运营商50强中的45家及全球1/3的人口。
</div> -->
</body>
</html>
5.3,常用技巧
企业级应用中清除浮动的最佳方法
- clearfix方案
- 使用伪元素after在父元素尾部添加一个元素
- 对这个添加的伪元素应用清除浮动的样式
- 必备三大样式:content、clear、display
- 可选三大样式:height、font-size、visibility
- 例如
.clearfix:after
{
content: "";
clear: both;
display: block;
}
.clearfix:after
{
content: "";
clear: both;
display: block;
height: 0px;
font-size: 0px;
visibility: hidden;
}
例子
<!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>
.box
{
border: 1px solid black;
}
.left
{
width: 200px;
height: 200px;
background-color: yellow;
float: left;
}
.right
{
width: 200px;
height: 200px;
background-color: green;
float: right;
}
.clearfix:after
{
content: "";
clear: both;
display: block;
height: 0px;
font-size: 0px;
visibility: hidden;
}
.clear
{
clear: both;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
5.4,实战案例
如何实现一个三列布局
- 实现一个左中右布局
- 左右两侧宽度固定
- 中间内容区宽度能够自适应
双飞翼布局
- 第一步:使用float属性让左中右三列浮动
- 第二步:使用负margin属性让左右两列与中间列处于同一水平线上
- 第三步:在中间列中增加一个div内容元素,设置margin值为左右两列的宽度
- 最后,别忘了清除浮动,让父元素高度正常显示
优点
- 中间内容列宽度自适应
- 中间内容区域先加载
- 使用浮动布局
- 巧妙使用负margin属性保持三列水平
- 方法简单直接
- 浏览器兼容性好
例子
<!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>
.container
{
border: 1px solid red;
width: 800px;
margin: 0px auto;
overflow: hidden;
}
.center
{
float: left;
background: yellow;
width: 100%;
}
.left
{
float: left;
background: green;
width: 200px;
margin-left: -100%;
}
.right
{
float: left;
background:pink;
width: 200px;
margin-left: -200px;
}
.content
{
margin: 0% 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="center">
<div class="content">华为云</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)