CSS布局中说到浮动,浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动
框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
一float属性的定义和用法
float属性:设置元素浮动
可能的值:
none 不浮动,在文档流内,默认
left 左浮动,脱离文档流
right 右浮动,脱离文档流
inherit 规定应该从父元素继承 float属性的值。
(1)三个不浮动元素的图示和效果:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="background: peru;height: 200px;width: 300px;"> a </div> <div style="width: 300px;background: palevioletred;height: 200px;"> b </div> <div style="background: fuchsia;height: 200px; width: 300px"> c </div> </body> </html>
(2)第一个元素向右浮动的图示和效果:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="background: peru;height: 200px;width: 300px;float: right"> a </div> <div style="width: 300px;background: palevioletred;height: 200px;"> b </div> <div style="background: fuchsia;height: 200px; width: 300px"> c </div> </body> </html>
框a向右浮动分离文档流;框b占据框a原来的位置.
(3)设置三个元素均向左浮动的图示和效果:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="background: peru;height: 200px;width: 300px;float: left"> a </div> <div style="width: 300px;background: palevioletred;height: 200px;float: left;"> b </div> <div style="background: fuchsia;height: 200px;width: 300px;float: left"> c </div> </body> </html>
如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间.
相关推荐
Day06-CSS布局-浮动
DIV+CSS布局:CSS浮动float属性详解 不解释
DIV+CSS布局:CSS浮动float属性详解[归纳].pdf
一个纯静态HTML+CSS单页面练习,牵扯布局、浮动练习。
DIVCSS布局:CSS浮动float属性详解
文本、图像、超链接、列表、菜单、网站导航、表单、数据表格、浮动布局等CSS布局控制。),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web标准...
网页设计-页面布局篇(Css+Div),网页设计-页面布局篇(Css+Div).网页设计-页面布局篇(Css+Div).网页设计-页面布局篇(Css+Div).
资源中包含html+CSS+div的布局练习,其中包括固定布局、流式布局、浮动布局、定位布局等布局方式的练习Demo,另外还对CSS中的一些特殊的属性进行了练习,包括position、float、display等属性,对每一个属性和布局的...
文本、图像、超链接、列表、菜单、网站导航、表单、数据表格、浮动布局等CSS布局控制。)智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web...
...
...
文本、图像、超链接、列表、菜单、网站导航、表单、数据表格、浮动布局等CSS布局控制。),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web...
css基础-浮动
),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web标准应用之先驱——闪客帝国... [显示全部] 《CSS网站布局实录:基于Web标准的网站设计指南...
在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点。今天我们来深入学习一下css布局相关的知识。 上篇文章我们讲完了css布局中盒模型和元素分类的相关知识,同时...
适合前端新手小白的布局方面小技巧,内容主要为利用元素定位和浮动方面的知识实现圣杯布局、双飞翼布局、黏连布局、伪等高布局等,解决浮动元素高度失效和相邻垂直外边距重叠问题,同时还解决ie6下fixed失效问题。
文本、图像、超链接、列表、菜单、网站导航、表单、数据表格、浮动布局等CSS布局控制。),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web...