`
swingboat
  • 浏览: 61837 次
  • 性别: 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
分享到:
评论

相关推荐

    DIVCSS布局:CSS浮动float属性详解.doc

    总结来说,CSS的`float`属性是构建网页布局的重要工具,它可以控制元素的位置,使内容沿页面边缘流动,实现多列布局,并对元素进行灵活的定位。然而,使用`float`时需要注意其可能带来的副作用,如浮动元素导致的...

    div+css float 布局,适配手机

    在高洛峰老师的 `div+css` 视频教程中,他可能详细讲解了如何创建浮动布局,包括设置 `div` 的宽高、设置 `float` 属性、清理浮动(clear floats)以防止父元素高度塌陷,以及如何使用媒体查询进行响应式设计。...

    div和css布局代码

    - 在网页布局中,`div` 元素经常被用作容器,用来包裹其他内容并进行样式化处理。 - 示例: ```html &lt;div id="warp"&gt; &lt;div id="column"&gt; &lt;div id="column1"&gt;...&lt;/div&gt; &lt;div id="column2"&gt;...&lt;/div&gt; &lt;div ...

    一个简单的网页布局案例(DIV+CSS)

    通过对比这些文件,我们可以学习到如何根据需求调整布局,如更改边距、浮动(float)、清除浮动(clear)、盒模型(box model)属性等。 1. **浮动布局**:在早期的网页布局中,`float`属性常被用来创建多列布局。...

    div+css 网页布局教程+例题...

    在`div+css`布局中,常常使用浮动(`float`)和清除(`clear`)属性来创建多列布局。浮动元素会脱离正常文档流,并向左或向右移动,直到碰到容器边缘或其他浮动元素。清除属性则用于防止后续元素跟随浮动元素,确保...

    CSS浮动属性Float详解 什么是CSS Float?

    CSS 浮动属性 Float 是一种重要的定位属性,允许页面元素浮动在其他元素旁边。Float 属性可以取四个值:Left、Right、None 和 Inherit。其中,Left 和 Right 分别浮动元素到左边和右边,None 是默认值,使元素不浮动...

    div+css整体布局

    本实例着重讲解如何利用`div+css`实现整体布局,并特别关注`float`属性的使用以及`div`的居中处理。 一、`div`元素的运用 `&lt;div&gt;`是HTML中的一个通用容器元素,用于组合其他HTML元素,为它们提供结构。在`div+css`...

    div+css案例,网页设计

    1. **基本布局**:使用Div实现网格系统,例如两栏或三栏布局,展示如何通过CSS浮动(float)和清除(clear)控制元素的位置。 2. **定位**:通过CSS的position属性(static、relative、absolute、fixed)来精确控制...

    Div+CSS简单布局

    1. **Float布局**:设置`float: left`或`float: right`可以使Div元素向左或向右浮动,从而实现并排显示。但需要注意清除浮动(`clear:both`)以防止父元素高度塌陷。 2. **Flex布局**:使用`flex-direction: row`,...

    DIV+CSS布局大全

    1. **浮动布局**:使用`float`属性让元素脱离正常文档流,实现多列布局。 2. **清除浮动**:防止父元素因浮动元素而高度塌陷,可以使用`clear`属性或添加额外的清除元素。 3. **绝对定位**:使用`position: absolute...

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

    "用CSS的float和clear属性进行三栏网页布局" 本文介绍了一种使用CSS的float和clear属性来实现三栏网页布局的方法。这种布局是最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容。基本...

    《Div+CSS布局大全》.zip

    5. **流体布局**:利用百分比单位和媒体查询,Div+CSS布局可以实现流体布局,使网页在不同屏幕尺寸下自适应。这对于响应式设计至关重要,确保在手机、平板和桌面电脑上都能提供良好的用户体验。 6. **Flexbox布局**...

    利用DIV布局的好资料

    7. **浮动与清除**:早期的`div`布局经常用到`float`属性,使元素脱离正常文档流,但这样可能导致布局问题。`clear`属性用于解决浮动元素引起的父元素高度塌陷问题,但现在通常使用Flexbox或Grid布局避免这些问题。 ...

    一个div css 网页 布局 模版

    在网页设计领域,Div CSS布局模版是一种常用的技术,用于构建高效、响应式的网页结构。Div,全称为“Division”,是HTML中的一个区块元素,它允许我们将网页内容划分为多个独立的部分,便于管理和样式化。CSS,即...

    div布局中float详解[收集].pdf

    理解并正确使用`float`和`clear`属性是CSS布局中至关重要的技能,它们可以帮助开发者构建灵活且响应式的网页结构。同时,要留意各种清除浮动的方法,根据实际情况选择最合适的方式,以确保布局的稳定性和跨浏览器...

    变幻之美DivCSS网页布局揭秘-案例实战篇源码

    此外,你还将接触到浮动(Float)、清除(Clear)和定位(Positioning)等经典布局技巧,这些都是解决Div+CSS布局中常见问题的关键。例如,浮动用于创建多列布局,清除则用于解决因浮动元素引起的父元素高度塌陷问题...

Global site tag (gtag.js) - Google Analytics