`
swingboat
  • 浏览: 60354 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

利用div进行页面的布局1(float&clear属性)

阅读更多

请看下面的代码:

 1 < html >
 2 < head >
 3 < script  language ="javascript" >
 4 </ script >
 5 < style  type ="text/css" >
 6 </ style >
 7 </ head >
 8 < body >
 9 < div  style ="position:absolute;top:100px;left:100px;width:300;height:300;background-color:#99FF00" >
10      < div  style ="float:left;width:100;height:100;background-color:red" ></ div >
11      < div  style ="clear:right;height:100;background-color:blue;" ></ div >
12 </ div >
13 </ body >
14 </ html >

 
float : none | left |right
 
参数:
 
none :  对象不浮动
left :  对象浮在左边
right :  对象浮在右边
 
说明:
该属性的值指出了对象是否及如何浮动。
当该属性不等于none引起对象浮动时,对象将被视作块对象(block-level),即display属性等于block。也就是说,浮动对象的display特性将被忽略。
对应的脚本特性为styleFloat。

clear : none | left |right | both
 
参数:
 
none :  允许两边都可以有浮动对象
both :  不允许有浮动对象
left :  不允许左边有浮动对象
right :  不允许右边有浮动对象
 
说明:
 
该属性的值指出了不允许有浮动对象的边。
对应的脚本特性为clear
分享到:
评论

相关推荐

    用CSS的float和clear属性进行三栏网页布局

    本文介绍一种用CSS的float和clear属性来获得三栏布局的方法。 绝大多数网页设计者都熟悉传统的网页设计技术,用这些技术可以生成带有表格、创建固定宽度布局或者“液态”(它可以根据用户浏览器窗口宽度自动伸缩)布局...

    一个挺常用的float布局div问题解决方法

    这次遇到个类似的控件,一个父div带边框,里面就是一个一个float的子div,需要换行的时候加了一个 float:left; height:0px; width:100%; overflow:hidden; font:0pt;/* 蛋疼的IE6你懂的*/ 的伪换行符div 后面还...

    css浮动(float/clear)使用讲解

    可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为div元素是独占一行的。 注意,以上这些理论,是指标准流中的div。 无论多么复杂的布局,其基本出发点均是:“如何在一行...

    HTML+CSS总结.doc

    margin-left 属性和 margin-right 属性分别设置 div 的左右边距,当设置 div 左外边距和右外边距的值为 auto 时,左外边距和右外边距将相等。float 属性也称为浮动属性,可以使多个块状元素并列于一行。对前面的 div...

    CSS网站布局实录 (第二版)PDF版

    8.1.4 创建CSS布局页面 8.2 Dreamweaver CS3的CSS管理 8.3 CSS代码调试 8.3.1 安装Firefox Web Developer 8.3.2 界面总览 8.3.3 主要功能 8.4 Web Accessibilty Toolbar 8.4.1 安装工具栏 8.4.2 界面与功能总览 第9...

    Flex布局实现div内部子元素垂直居中的示例

    注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。  采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),...

    常用的DIV+CSS的基本框架结构但不推荐都放一个div里

    这是因为浮动元素可能会导致页面的布局混乱,使用 `clearfloat` 样式可以避免这种情况。 为什么不推荐将所有内容都放入一个 DIV 元素中 将所有内容都放入一个 DIV 元素中可能会导致页面的布局混乱、样式难以控制和...

    css常用布局多行多列

    left : 文本流向对象的右边 right : 文本流向对象的左边 它是怎样工作的,看个一行两列的例子 xhtml: &lt;div id=warp&gt; &lt;div id=column1&gt;这里是第一列&lt;/div&gt; &lt;div id=column2&gt;这里是第二列&lt;/div&gt; &lt;div class=clear&gt;&lt;/...

    零基础学HTML CSS源代码

    示例描述:本章演示用DIV布局。 div布局.html 演示div布局实例。 层嵌套.html 层嵌套的用法。 table布局.html 演示table布局。 DIV布局样式.html 设置DIV布局样式。 如何用DIV布局.html ...

    css入门笔记

    1.css的概述 1.问题 HTML属性修饰有一定局限,是不太便捷 2.css的语法规范 1.使用css样式方式 1.内联样式 行内样式 特点:将css样式定义在HTML标记中 语法: 样式声明:用样式属性和值组成(属性:值;) ...

    详细解读CSS中的伪类after

    前段时间学习 web 布局的时候,因为要用浮动 float 属性,所以就顺理成章地碰到了清除浮动 clear 属性。教学的案例中是用新建一个空的 div 标签的方式来清除浮动的,主要代码如下: CSS Code复制内容到剪贴板 &lt;div ...

    让多个div在同一行显示的样式及html代码

    clear:both; word-break:break-all; word-wrap:break-word; } 复制代码代码如下: ”code” class=”css”&gt;&lt;!–width指定每个div占据的宽度–&gt;&lt;/pre&gt;.custom_div{height: 23px;width: 50px;line-height: 23px;...

    css——之三行三列等高布局图文教程

    CSS三行三列等高布局图文教程 本文将详细介绍如何使用CSS实现三行三列等高布局,并提供了详细的图文教程。 一、创建结构 首先,我们需要创建一个基本的HTML结构,包括header、container和footer三个部分。 ```...

    ie6布局网页padding值加倍的解决方法

    我们在用CSS布局网页的时候常常会用的float浮动,为了兼容各浏览器,往往会在最后一个浮动后面加上一个空的div用来清除浮动,如:&lt;div class=clear&gt;&lt;/div&gt;,但是今天发现,只要设置了padding值的元素内有&lt;div class=...

    css之clearfix的用法深入理解(必看篇)

    看下面的例子:Div布局如下: Css代码如下: CSS Code复制内容到剪贴板 .out{border:1px solid #F00; width:500px;} .inner1{width:200px; height:200px; float:left; border:1px solid #00F;} .inner...

Global site tag (gtag.js) - Google Analytics