请看下面的代码:
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属性来获得三栏布局的方法。 绝大多数网页设计者都熟悉传统的网页设计技术,用这些技术可以生成带有表格、创建固定宽度布局或者“液态”(它可以根据用户浏览器窗口宽度自动伸缩)布局...
这次遇到个类似的控件,一个父div带边框,里面就是一个一个float的子div,需要换行的时候加了一个 float:left; height:0px; width:100%; overflow:hidden; font:0pt;/* 蛋疼的IE6你懂的*/ 的伪换行符div 后面还...
可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为div元素是独占一行的。 注意,以上这些理论,是指标准流中的div。 无论多么复杂的布局,其基本出发点均是:“如何在一行...
margin-left 属性和 margin-right 属性分别设置 div 的左右边距,当设置 div 左外边距和右外边距的值为 auto 时,左外边距和右外边距将相等。float 属性也称为浮动属性,可以使多个块状元素并列于一行。对前面的 div...
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布局以后,子元素的float、clear和vertical-align属性将失效。 采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),...
这是因为浮动元素可能会导致页面的布局混乱,使用 `clearfloat` 样式可以避免这种情况。 为什么不推荐将所有内容都放入一个 DIV 元素中 将所有内容都放入一个 DIV 元素中可能会导致页面的布局混乱、样式难以控制和...
left : 文本流向对象的右边 right : 文本流向对象的左边 它是怎样工作的,看个一行两列的例子 xhtml: <div id=warp> <div id=column1>这里是第一列</div> <div id=column2>这里是第二列</div> <div class=clear></...
示例描述:本章演示用DIV布局。 div布局.html 演示div布局实例。 层嵌套.html 层嵌套的用法。 table布局.html 演示table布局。 DIV布局样式.html 设置DIV布局样式。 如何用DIV布局.html ...
1.css的概述 1.问题 HTML属性修饰有一定局限,是不太便捷 2.css的语法规范 1.使用css样式方式 1.内联样式 行内样式 特点:将css样式定义在HTML标记中 语法: 样式声明:用样式属性和值组成(属性:值;) ...
前段时间学习 web 布局的时候,因为要用浮动 float 属性,所以就顺理成章地碰到了清除浮动 clear 属性。教学的案例中是用新建一个空的 div 标签的方式来清除浮动的,主要代码如下: CSS Code复制内容到剪贴板 <div ...
clear:both; word-break:break-all; word-wrap:break-word; } 复制代码代码如下: ”code” class=”css”><!–width指定每个div占据的宽度–></pre>.custom_div{height: 23px;width: 50px;line-height: 23px;...
CSS三行三列等高布局图文教程 本文将详细介绍如何使用CSS实现三行三列等高布局,并提供了详细的图文教程。 一、创建结构 首先,我们需要创建一个基本的HTML结构,包括header、container和footer三个部分。 ```...
我们在用CSS布局网页的时候常常会用的float浮动,为了兼容各浏览器,往往会在最后一个浮动后面加上一个空的div用来清除浮动,如:<div class=clear></div>,但是今天发现,只要设置了padding值的元素内有<div class=...
看下面的例子:Div布局如下: Css代码如下: CSS Code复制内容到剪贴板 .out{border:1px solid #F00; width:500px;} .inner1{width:200px; height:200px; float:left; border:1px solid #00F;} .inner...