Go语言视频零基础入门到精通

javalearner · 发表于 2014-11-2 23:55:20

相信我们大家都遇到过这样一种情况下面是代码与效果：代码： <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css属性</title>
<style type="text/css">
* {
  margin: 0px;
  padding: 0px;
}
body {
  width: 500px;
  margin: 0px auto;
}
#div3 {
  width: 500px;
  padding: 0px;
  background-color: #f00;
}
#div1 {
  width: 250px;
  float: left;
  background-color: #00F;
}
#div2 {
  width: 250px;
  float: left;
  background-color: #ff0;
}
</style>
</head> <body>
<div id="div3">
<div id="div1">我显示的是div1中的内容，我的高度比div2的要高</div>
<div id="div2">o是右侧的文字我是右侧的文字我是右侧的文字我是右侧的文字我是右侧的文字我是右侧的文字我是右侧的文字我是右侧的文字我是右侧的文字我是右侧的文字我是右侧的文字我是右侧的文字</div>
</div>
</div>
</body>
</html>
上面的代码运行结果如下图：

我们发现上面的实力中div1与div2外层div3的背景没有显示，实际上是因为div1与div2使用float:left属性后他们脱离了原来的图层，这样说有的人可能不太理解，我们先把没有使用float属性时这三个div看做一个平面上，但当我们给div1与div2使用float属性后他们就脱离了原来的平面，变成了一个新的图层（就相当于我们使用photoshop的时候创建新图层，在新图层上编辑内容不会影响下面的图层一样），如图

因此就不能够撑开div3的背景。
那么我们如何解决这个问题呢，就应用到了我们的clear属性了，首先在样式中添加 .clear {
clear: both;
} 样式文件，然后我们在div2结束与div3结束中间添加一个应用上面样式的div，如下 <div id="div3">
<div id="div1">我显示的是div1中的内容，我的高度比div2的要高</div>
<div id="div2">o是右侧的文字我是右侧的文字我是右侧的文字我是右侧的文字我是右侧的文字我是右侧的文字我是右侧的文字我是右侧的文字我是右侧的文字我是右侧的文字我是右侧的文字我是右侧的文字</div>
<div class="clear"></div>
</div> 应用完后效果图

这样我们就解决了div3不能被撑开的问题。    同样在ie6中当我们应用float属性后有时下面的div与上面的div之间会出现间隙，我们加上这个试试就可以解决。

复制代码

源码下载：http://file.javaxxz.com/2014/11/2/235520406.zip

		自动登录	找回密码
密码			立即注册

JAVA高级面试进阶视频教程	Java架构师系统进阶VIP课程	分布式高可用全栈开发微服务教程	Go语言视频零基础入门到精通	Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程	SpringBoot2.X入门到高级使用教程	大数据培训第六期全套视频教程	深度学习（CNN RNN GAN）算法原理	Java亿级流量电商系统视频教程
互联网架构师视频教程	年薪50万Spark2.0从入门到精通	年薪50万！人工智能学习路线教程	年薪50万！大数据从入门到精通学习路线	年薪50万！机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程	深度学习数据分析基础到实战	最新黑马javaEE2.1就业课程	从 0到JVM实战高手教程	MySQL入门到精通教程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

Java亿级流量电商系统视频教程

年薪50万Spark2.0从入门到精通

年薪50万！人工智能学习路线教程

[CSS学习]css中clear属性的使用一例

相关帖子