一、清除浮动。

(1)verflow:hidden;这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很 了解。一提到清除浮动,我们就会想到另外一个CSS样式:clear:both,我相信对于这个属性的理解大家都不成问题的。

verflow:hidden清除浮动,例如如下:(样式box div是样式content div的父元素)

.box{ 
          background:#000; 
          width:300px;
          overflow:hidden;
         } 
        .content {         
          float:left; 
          width:200px; 
          height:200px; 
          background:red;
         }

(效果图) box设置overflow:hidden,清除content的浮动,所以box的高度随content的高度变化而变化。如果box没有设置overflow:hidden,那么content的高将影响不了box的高。

(2)clear:both;该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。

当属性设置float(浮动)时,其所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这个时候我们就需要用clear:both;来清除。

样式      <style>

.p1{
float:left;
width:200px;
background: darkgoldenrod;
}
.p2{
float:left;
width:400px;
background: darkmagenta;
}
.p3{
clear: both;
}

</style>

HTML中的代码

<p class="p1">这个是第1列,</p>
<p class="p2">这个是第2列,</p>
<p class="p3">这个是第3列。</p>

如果不给第三列clear:both,那么第三列就会在第二列的后面,加了之后,在第二列的下面。

在用HTML+css写页面中遇到的问题的更多相关文章

  1. 使用CSS在页面中嵌入字体

    http://jingyan.baidu.com/article/3065b3b6e9b2d9becff8a4c1.html 首先感谢css9.net照抄原话: 字体使用是网页设计中不可或缺的一部分. ...

  2. 通过CSS控制页面中的内容垂直居中的方法

    方法一:通过行高(line-height)定位 line-height通常是用于调节一段文字的行与行之间的距离,或者说两行文字之间的距离,如果行高是500px,那么每一行中的文字距离本行的顶部就是25 ...

  3. Flex中使用CSS控制页面样式

    Using file: Stylebounding.mxml Stylebounding2.mxml myCSS0329.css 在Flex4中使用CSS控制样式,既可以直接在MXML文件中写样式,也 ...

  4. 1.写页面 2.css的继承属性有哪些 3.margin对布局的影响

    1. sparent 透明的 2. placeholder 提示语 写页面 1.搞清结构层次 2. 保证模块化 让它们之间不能收到影响. (1) 元素性质 (2)标准流 浮动带来的脱离文档流撑不起父级 ...

  5. 同一标签内多个css规则在页面中如何显示?

    这两天在学习css涉及到内联.外联.嵌入对页面的影响: 1.内联式-----将css代码直接写在html中.用 <style> 标记将样式定义为内部块对象.示例代码如下如下: <st ...

  6. MVC学习随笔----如何在页面中添加JS和CSS文件

    http://blog.csdn.net/xxjoy_777/article/details/39050011 1.如何在页面中添加Js和CSS文件. 我们只需要在模板页中添加JS和CSS文件,然后子 ...

  7. css 实现页面加载中等待效果

    <!DOCTYPE html> <html> <head> <title>css实现页面加载中,请稍候效果</title> <meta ...

  8. ASP.NET aspx页面中 写C#脚本; ASP.NET 指令(<%@%>);

    1 <h2>Welcome</h2> <ul> <% for (int i = 0; i <= Convert.ToInt32(ViewData[&qu ...

  9. 利用css来让一个div在页面中垂直居中的方法

    一.如何让一个div在页面中垂直居中(请至少列出三种) 1.距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就 ...

随机推荐

  1. C语言基础 (10) 变量作用域,生命周期 内存结构

    01 课程回顾 1.指针数组 注意: 对于数组来说,在使用sizeof的时候a和&a[0]是不一样的, 虽然以%x打印出来他们都是地址 2.值传递 int a; fun(a); int *** ...

  2. ajax异步上传文件和表单同步上传文件 的区别

    1. 用表单上传文件(以照片为例)-同步上传 html部分代码:这里请求地址index.php <!DOCTYPE html> <html lang="en"&g ...

  3. Problem 13

    Problem 13 # Problem_13 """ Work out the first ten digits of the sum of the following ...

  4. j2ee消息中间件

    http://blog.csdn.net/apanious/article/details/51014396

  5. 【Manthan, Codefest 18 (rated, Div. 1 + Div. 2) A】Packets

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 多重背包的二进制优化. 就是将数量x分成接近log2x份 然后这log2x份能组合成1..x内的所有数字. 从而将多重背包转化成01 ...

  6. 【hdu 6396】Swordsman

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 开k个优先队列.每个队列都满足从小到大那种.. 首先将所有的怪物加入到第一个队列中. 然后对于v[i]>=pq[i].top( ...

  7. BA--空调系统一次泵和二次泵区别

    通常来说,空调系统是按照满负荷设计的,但实际运行中,满负荷运行的 时间不足 3% ,空调设备绝大部分时间内在远低于额定负荷的情况下运转.在 部分负荷下,虽然冷水机组可以根据实际负荷调节相应的冷量输出, ...

  8. 操作服务器及MySQL数据库可以使其远程链接

    转自原文操作服务器及MySQL数据库可以使其远程链接 一般情况分三个地方准备,MySQL数据库,防火墙,还有你的服务器主机的准备 操作系统为centos6.5.其他系统大致差不多. 1:在服务器中安装 ...

  9. iOS开发一行代码系列:一行搞定输入框

    近期总结了下开发过程中经常使用的功能,发现有时候我在做反复性的劳动.于是决定把经常使用的功能抽出来,方便下次使用. 我的想法是:用最少的代码来解决这个问题.于是写了一些经常使用的工具类,名字就叫一行代 ...

  10. OC第三天(内存管理)

    内存管理: 1.作用范围: 不论什么继承了NSObject的对象,堆基本数据类型无效如:int a ,float price;;等 2.原理: 每一个对象内部都保存了一个与之相关的整数,称为引用计数器 ...