文档章节

float中的某些问题

p
 pf12345
发布于 2013/06/07 13:16
字数 626
阅读 62
收藏 1

      float浮动,在css中一个相当重要的属性功能,其可以用来创建多列网页布局、由无序列表创建导航工具栏等。float属性的取值包括:none(不浮动)、left(左浮动)、right(右浮动)。其可以应用于不仅于图像,还包括段落、列表、div块等,但在使用float时应注意几个几个基本行为:

      1、当float不等于none,即引起元素浮动时,元素将被视为块元素,相当于display:block;

      2、当浮动文本类时,必须指定其width值

      3、浮动元素将停留在包含在它的父级元素的区域里,不会穿过padding区

      在使用float时,首先要明白的是,其浮动的定位是相对于父级元素的;如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html" charset="utf-8"/>
    <style type="text/css">
        *{ margin: 0; padding: 0; }
        .main{ width: 1024px; height: 768px;  background-color: gray; }
        .left{ width:200px;  height:50px;  background-color: blue;  /*float:left;*/ }
        .right{ width:250px; height:60px; background-color: red; float:right; }
    </style>
</head>
<body>
<div class="main">
    <div class="left">
       <label>蓝色区域</label>
    </div>
    <div class="right">
        <label>红色区域</label>
    </div>
</div>
</body>
</html》

第一个为红色区域.right中未设置漂浮时图片,后为漂浮后图片。通过其可以看出:1、当红色区域向右飘时,其相对于其父元素div,即灰色区域向右漂浮。2、在蓝色区域,虽然设置其width和height属性值,但其仍会占据整个行的区域,设置width值仅为可视区域。因此,红色区域未漂浮至灰色区域最右顶端,若想其漂浮至最右顶端,则需要设置.left{float:left;}即将注释/*float:left*/取消结果如:

在使用漂浮时,由于浮动元素不会占据正常文档流空间,因此浮元素原由区域将由未明确定位的块级元素填充其区域。

还有个问题,即是,浮动元素的容器不会自动伸展来包含浮动元素而引起父级元素的坍塌,如上代码,若将蓝色区域与红色区域均进行漂浮,再将父级元素div中.main中height属性不设置,代码改为 .main{ width:524px;  margin: auto; background-color: gray; },则结果将是:

平面图

立体图

其父级元素div将消失。

float的使用可以更好的进行css布局,但在使用中要根据情况酌情使用。

© 著作权归作者所有

p
粉丝 17
博文 12
码字总数 10328
作品 0
成都
私信 提问
编写跨浏览器兼容的 CSS 代码的金科玉律

作为 Web 设计师,你的网站在各种浏览器中有完全一样的表现是很多人的目标,然而这是一个永远无法真正实现的目标,很多人认为,完美的跨浏览器兼容并不必要,这样说虽然没错,但在很多情形,...

鉴客
2010/06/09
612
6
二进制数据处理和基本数据类型转换工具类 - JHex

JHex工具类 简介 Java不是一个完全面向对象的编程语言,因为其有基本数据类型的存在,在Java中所有的数值类的基本数据类型都是有符号数,而在嵌入式系统常用的C语言编程的数据则分为有符号和...

王兴达
2018/05/22
304
1
css float浮动详解

css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,...

月心寒
2016/11/19
33
0
fastjson-1.1.56.android 发布,针对 VR 场景优化

fastjson-1.1.56.android 发布了。这又是一个针对Android的功能增强修复问题性能提升的版本,针对VR场景常用的数据类型float/float[]/double/double[]做了针对性的优化。 该版本主要更新内容...

wenshao
2017/01/15
1K
1
CSS常见错误汇总

刚写CSS那会,发现同样的代码在别外可以运行,而在自己的网页上不能运行,有时候气得想摔鼠标,其实有时候不是你代码有问题,而是与CSS相关的定义出 了问题,为了避免出现这些错误,即使你是...

名字已被取
2016/03/03
64
0

没有更多内容

加载失败,请刷新页面

加载更多

Activity启动模式二

上篇文章Activity启动模式一主要介绍了Activity的四种启动模式,这些启动模式都是在AndroidManifest中进行配置的。除此之外,Android系统还通过Intent类提供了一些标志位,同样可以指定Activ...

ltlovezh
34分钟前
4
0
三原色还原

1、Color Filter Array — CFA 随着数码相机、手机的普及,CCD/CMOS 图像传感器近年来得到广泛的关注和应用。 图像传感器一般都采用一定的模式来采集图像数据,常用的有 BGR 模式和 CFA 模式...

天王盖地虎626
45分钟前
3
0
kubernetes pod exec接口调用

正文 一般生产环境上由于网络安全策略,大多数端口是不能为集群外部访问的。多个集群之间一般都是通过k8s的ApiServer组件提供的接口通信,如https://192.168.1.101:6443。所以在做云平台时,...

码农实战
今天
8
0
3_数组

3_数组

行者终成事
今天
8
0
经典系统设计面试题解析:如何设计TinyURL(二)

原文链接:https://www.educative.io/courses/grokking-the-system-design-interview/m2ygV4E81AR 编者注:本文以一道经典的系统设计面试题:《如何设计TinyURL》的参考答案和解析为例,帮助...

APEMESH
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部