WEB前端之div css 清除浮动
吕益平 2018-05-29 来源 : 阅读 1328 评论 0

摘要:本文主要向大家介绍了WEB前端的div css 清除浮动,希望对大家学习WEB前端有所帮助。

本文主要向大家介绍了WEB前端的div css 清除浮动,希望对大家学习WEB前端有所帮助。


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: yellow;
/*
* 设置box1向左浮动
*/
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: yellowgreen;
/*
* 由于受到box1浮动的影响,box2整体向上移动了100px
* 我们有时希望清除掉其他元素浮动对当前元素产生的影响,这时可以使用clear来完成功能
* clear可以用来清除其他浮动元素对当前元素的影响
* 可选值:
* none,默认值,不清除浮动
* left,清除左侧浮动元素对当前元素的影响
* right,清除右侧浮动元素对当前元素的影响
* both,清除两侧浮动元素对当前元素的影响
* 清除对他影响最大的那个元素的浮动
*/
/*
* 清除box1浮动对box2产生的影响
* 清除浮动以后,元素会回到其他元素浮动之前的位置
*/
/*clear: left;*/
float: right;
}
.box3{
width: 300px;
height: 300px;
background-color: skyblue;
clear: both;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>

希望这篇文章可以帮助到你,总之同学们,it资讯尽在职坐标。


本文由 @职坐标 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论
本文作者 联系TA

熟悉企业软件开发的产品设计及开发

  • 57
    文章
  • 12249
    人气
  • 85%
    受欢迎度

已有47人表明态度,85%喜欢该老师!

进入TA的空间
求职秘籍 直通车
  • 索取资料 索取资料 索取资料
  • 答疑解惑 答疑解惑 答疑解惑
  • 技术交流 技术交流 技术交流
  • 职业测评 职业测评 职业测评
  • 面试技巧 面试技巧 面试技巧
  • 高薪秘笈 高薪秘笈 高薪秘笈
TA的其他文章 更多>>
java语言实现栈的顺序存储与链式存储
经验技巧 100% 的用户喜欢
一天天都在说hadoop,到底什么才是hadoop呢?
经验技巧 57% 的用户喜欢
WEB前端之div css 层级
经验技巧 100% 的用户喜欢
WEB前端之div css 绝对定位
经验技巧 100% 的用户喜欢
Java语言之Java Socket NIO示例
经验技巧 67% 的用户喜欢
其他海同师资 更多>>
孔庆琦
孔庆琦 联系TA
对MVC模式和三层架构有深入的研究
周鸣君
周鸣君 联系TA
擅长Hadoop/Spark大数据技术
范佺菁
范佺菁 联系TA
擅长Java语言,只有合理的安排和管理时间你才能做得更多,行得更远!
金延鑫
金延鑫 联系TA
擅长与学生或家长及时有效沟通
程光淼
程光淼 联系TA
精通C、C++等语言、智能芯片开发
经验技巧30天热搜词 更多>>

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程