CSS基础(六):浮动深入
来源:互联网 发布:php date 取小时分钟 编辑:程序博客网 时间:2024/06/04 18:15
参考了《CSS彻底设计研究》的文章,说的很不错,所以拿来做笔记。
浮动
在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素边界;而在竖直方向和兄弟元素依次排列,不能并排。使用浮动方式后,块级元素的表现就会不同。简单的说多个不设宽度的块级的元素可以横向排列。
CSS中有float属性,默认为none,也就是标准流通常的情况。如果将float属性设置为left或right,元素就会向其父元素的左侧或右侧紧靠,同时默认情况下,盒子的宽度不再伸展,而是根据盒子里面的内容的宽度来确定。
准备代码
先制作一个页面,然后再设置浮动进行分析。
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>float属性</title><style type="text/css">body{ margin:15px; font-family:Arial; font-size:12px; }.father{ background-color:#ffff99; border:1px solid #111111; padding:5px; }.father div{ padding:10px; margin:15px; border:1px dashed #111111; background-color:#90baff; }.father p{ border:1px dashed #111111; background-color:#ff90ba; } .son1{/* 这里设置son1的浮动方式*/}.son2{/* 这里设置son1的浮动方式*/}.son3{/* 这里设置son1的浮动方式*/}</style></head><body> <div class="father"> <div class="son1">Box-1</div> <div class="son2">Box-2</div> <div class="son3">Box-3</div> <p>这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字.</p> </div></body></html>
设置第1个浮动div
可以看到标准流中的Box-2的文字在围绕着Box-1排列,此时Box-1的宽度不再伸展,而是能容纳下内容的最小宽度。那么Box-2的盒子宽度范围如何确定呢?用Firebug可以发现,是与Box-1的左边框重合,因为此时Box-1已经脱离标准流,标准流中的Box-2会顶到原来Box-1的位置,而文字会围绕着Box-1排列。
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>float属性</title><style type="text/css">body{ margin:15px; font-family:Arial; font-size:12px; }.father{ background-color:#ffff99; border:1px solid #111111; padding:5px; }.father div{ padding:10px; margin:15px; border:1px dashed #111111; background-color:#90baff; }.father p{ border:1px dashed #111111; background-color:#ff90ba; } .son1{/* 这里设置son1的浮动方式*/float:left;}.son2{/* 这里设置son1的浮动方式*/}.son3{/* 这里设置son1的浮动方式*/}</style></head><body> <div class="father"> <div class="son1">Box-1</div> <div class="son2">Box-2</div> <div class="son3">Box-3</div> <p>这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字.</p> </div></body></html>
设置第2个浮动div
将Box-2的float属性也设置为left,可以看到Box-2也变为根据内容确定宽度,并使Box-3的文字围绕Box-2排列。Box-2的盒子宽度
也是与Box-1的左边框重合,Box-1和Box-2之间的空白是由两者的空白叠加而形成的。
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>float属性</title><style type="text/css">body{ margin:15px; font-family:Arial; font-size:12px; }.father{ background-color:#ffff99; border:1px solid #111111; padding:5px; }.father div{ padding:10px; margin:15px; border:1px dashed #111111; background-color:#90baff; }.father p{ border:1px dashed #111111; background-color:#ff90ba; } .son1{/* 这里设置son1的浮动方式*/float:left;}.son2{/* 这里设置son1的浮动方式*/float:left;}.son3{/* 这里设置son1的浮动方式*/}</style></head><body> <div class="father"> <div class="son1">Box-1</div> <div class="son2">Box-2</div> <div class="son3">Box-3</div> <p>这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字.</p> </div></body></html>
设置第3个浮动div
可以看到文字会围绕浮动的的盒子排列。
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>float属性</title><style type="text/css">body{ margin:15px; font-family:Arial; font-size:12px; }.father{ background-color:#ffff99; border:1px solid #111111; padding:5px; }.father div{ padding:10px; margin:15px; border:1px dashed #111111; background-color:#90baff; }.father p{ border:1px dashed #111111; background-color:#ff90ba; } .son1{/* 这里设置son1的浮动方式*/float:left;}.son2{/* 这里设置son1的浮动方式*/float:left;}.son3{/* 这里设置son1的浮动方式*/float:left;}</style></head><body> <div class="father"> <div class="son1">Box-1</div> <div class="son2">Box-2</div> <div class="son3">Box-3</div> <p>这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字.</p> </div></body></html>
改变浮动的方向
将Box-3改为向右浮动,可以看到Box-3移动到了最右端,文字段落盒子的范围没有改变,但是文字变成了夹在Box-2和Box-3之间。
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>float属性</title><style type="text/css">body{ margin:15px; font-family:Arial; font-size:12px; }.father{ background-color:#ffff99; border:1px solid #111111; padding:5px; }.father div{ padding:10px; margin:15px; border:1px dashed #111111; background-color:#90baff; }.father p{ border:1px dashed #111111; background-color:#ff90ba; } .son1{/* 这里设置son1的浮动方式*/float:left;}.son2{/* 这里设置son1的浮动方式*/float:left;}.son3{/* 这里设置son1的浮动方式*/float:right;}</style></head><body> <div class="father"> <div class="son1">Box-1</div> <div class="son2">Box-2</div> <div class="son3">Box-3</div> <p>这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字.</p> </div></body></html>
当慢慢缩小浏览器窗口时,Box-2和Box-3的距离会越来越小,文字会布满空间,但缩小到一定程度时,Box-3会被挤到下一行,但仍保持向右浮动。
再次改变浮动的方向
将Box-2改为向右浮动,Box-3改为向左浮动。布局和上面例子一样。
当慢慢缩小浏览器窗口时,Box-2和Box-3的距离会越来越小,文字会布满空间,但缩小到一定程度时,Box-3会被挤到下一行,但仍保持向左浮动。
清除浮动
使用clear属性清除浮动,设置为left,消除左边浮动的影响;设置为right,消除右边浮动的影响;当设置为both,同时消除左右两边浮动的影响。后面将会在CSS技巧教程中介绍到。
- CSS基础(六):浮动深入
- CSS基础(六):浮动深入
- CSS学习笔记-浮动(六)
- CSS 基础(012_浮动)
- css基础样式(9)-定位、浮动
- HTML CSS基础--浮动
- CSS浮动基础详解
- CSS基础-清除浮动
- CSS基础清除浮动
- CSS中的浮动深入学习
- CSS基础-浮动流 15
- CSS基础-清除浮动 16
- css基础浮动相关知识
- HTML+CSS基础之浮动
- Python3基础(六) 深入list列表
- Python3基础(六) 深入list列表
- CSS基础(一)清除浮动的几种方法
- CSS基础-20CSS定位-浮动
- 通过GeoIP2分析访问者IP获取地理位置信息
- MPAndroidChart系列源码解读(五)
- 利用JMX来监控大部分java应用
- Android 显示空页面工具类
- Android 智能问答机器人的实现
- CSS基础(六):浮动深入
- Oracle 11g 新特性数据库用户密码区分大小写参数sec_case_sensitive_logon对sys无效
- iOS swift判断摄像头权限
- 如何优化服务器
- 如何设计和维护好一个大项目
- FreeRTOS高级篇3---FreeRTOS调度器启动过程分析
- app在安卓5.0运行正常,但是在6.0运行报错
- TensorFlow博客翻译——DeepMind转向TensorFlow
- Android 自定义ViewGroup 实战篇 -> 实现FlowLayout