html盒子浮动分栏,DIV浮动定位实现CSS分栏布局

本文和大家重点讨论一下DIV浮动定位的使用，CSS布局中实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项中的DIV绝对定位，第二种则是使用CSS中的DIV浮动定位(float)概念，这里重点描述一下DIV浮动定位。

CSS分栏布局

CSS布局中实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项(absolute、static、relative和fixed)中的DIV绝对定位(absolutepositioning)，它可以将文档中的某个元素从其原本位置上移除，并重新定位在期望的任何地点之上。第二种则是使用CSS中的DIV浮动定位(float)概念。DIV绝对定位或DIV浮动定位都能够用来实现分栏效果。二者可以独立使用，也可以结合在一起，相辅相成。

DIV浮动定位

DIV浮动定位的本意是要将插入到文章中的图片向左或者向右浮动，使图片下方的文字自动环绕在它的周围，使图片的左边或者右边不会出现一大块的留白。DIV浮动定位的语法虽然简单，但却不那么容易掌握，下面让我们举例说明如何用浮动来进行布局。同样，我们要实现一个带页脚的三栏布局。如下图：

如何用DIV浮动定位实现这样的效果呢？

其实很简单：

1、设定E的宽度，让E居中

2、设定A、B、C的宽度，将A、B、C分别向左浮动

3、给页脚设置clear属性

需要说明的是，浮动布局依然遵循常规文档流，所以与绝对定位相比，DIV浮动定位时HTML源文件中元素声明的位置显得格外重要。当然，解决这个问题的最简单的方法就是在源文件中交换左栏和右栏的声明次序，也有方法不用交换各栏的次序也可以实现同样的布局，但是，这就要用到一种比较晦涩的使用负边距值的方法。一般情况下，人们十有八九会选择交换源文件中左中两栏的声明次序。

【编辑推荐】

【责任编辑：程华权 TEL：(010)68476606】

html盒子浮动分栏,DIV浮动定位实现CSS分栏布局相关推荐

利用div的定位制作复杂的页面布局
既然是复杂的布局自然用到较多的div以及并列与嵌套.这就要我们在为它们命名的时候遵从一定的规定,以便于可读性. 下面先来看一张布局图: 这是三九健康网一个频道的页面,原本是很长的页面,但为了说明问题, ...
css浮动，清除浮动，溢出属性，定位，设置透明度
浮动>>>float 在css中,任何元素都可以浮动. 浮动元素会生成一个块级框,而不论它本身是什么元素. 关于浮动的两个特点: 浮动的框可以像做或向右移动,直到它的外边缘碰到包含框 ...
认真学习前端第二周学习笔记（浮动，定位，精灵图，布局）
文章目录前言一.关于浮动二.关于定位三.关于精灵图四.关于布局总结前言提示:这是我在专业培训机构学习的第二周,感觉学习进度好像有一点点慢,不过也还好,能让我们更好的消化消化,今天也是先 ...
CSS中文档流之普通流，浮动及定位、浮动特性及清除浮动的方式、定位模式，子绝父相搭配定位方式、z-index层级
文档流: 普通流(normal flow): 字面意思是普通流或者标准流,也就是常说的文档流,指网页内标签正常是从上到下,从左到右排列的意思,css的定位机制有3种:普通流(标准流).浮动.定位. 浮 ...
css为什么要用浮动_CSS中有几种定位？如何使用？
1.CSS布局的三种机制网页布局的核心--就是用CSS来摆放盒子位置. CSS提供部分了3种机制来设置盒子的摆放位置: 普通流(标准流) 浮动(让盒子从普通流中浮起来 -- 让多个盒子(div)水平 ...
Div+CSS教程----DivCSS布局绝对定位和浮动
在CSS中,实现分栏布局有两种方法.第一种方法是使用四种CSS定位选项(absolute .static.relative和fixed)中的绝对定位(absolute positioning),它可以 ...
【CSS】通过定位修改 display 显示模式 ( Display 显示模式转换 | inline-block 改块元素为行内块元素示例 | 为块元素设置浮动 | 为块元素设置定位 )
文章目录一.Display 显示模式转换二.块元素示例三.inline-block 改元素为行内块元素示例四.为块元素设置浮动五.为块元素设置定位一.Display 显示模式转换 disp ...
html div浮动效果,【html】【6】div浮动float
我想当看完上面的必看链接,拥有一定的基础后也得7天左右, 记住一定要看完,知道它都有什么,没学会不要紧,哪怕只是有个简单的概念也行, 随着后续的使用慢慢深入学习,现在开始div布局. 必看参考: ...
position:fixed和scroll实现div浮动【示例】
原文:position:fixed和scroll实现div浮动[示例] 前言在自己建站的过程中,要实现一个div随滚动条浮动的效果,网上找了些示例不太好用,还是自己动手,丰衣足食,写的不好请大家谅解 ...
CSS布局最常用属性float（浮动）和position（定位）
在进行CSS网页布局时,对元素与容器进行布置与规划,最常用的两个属性就是浮动float和定位position.这两个属性的理解对CSS网页布局的学习非常重要.我们52CSS.com就这两个属性的相关知 ...

html盒子浮动分栏,DIV浮动定位实现CSS分栏布局

html盒子浮动分栏,DIV浮动定位实现CSS分栏布局相关推荐

最新文章

热门文章