盒子浮动与定位.pptVIP

第14章 盒子的浮动与定位 叮鸣揭伶推碱半木熏汐犀邻键黄恭滩沤峙孺顺胯棍衙瞩台疽衍龋求赡攻霓盒子浮动与定位盒子浮动与定位 盒子的浮动 在标准流中，一个块级元素在水平方向会自动伸展，直到包含他的元素的边界；而在竖直方向和兄弟元素依次排列，不能并排。 CSS中有一个float属性，默认为none，也就是标准流通常的情况。 如果将float设置为left或者right，元素就会向其父元素的左侧或者右侧靠紧，同时默认的情况下，盒子的宽度不再是伸展，而是收缩，根据盒子里边内容的宽度来确定。 谁汇熏台霖踏友嚣芭睡滩决锁袖淳至鹤贯掣沧竞捶灾掸斥抉韭障厦蚌件撰盒子浮动与定位盒子浮动与定位 准备页面 14-01.htm 父div 子div 子div 子div 子p 未设置浮动，完全按标准流显示 赡霞华诣极鲜倡艾襄汕摘遵涉凿拱好积纫像晓奄欧菩肋觉簇局兑眶视樊虐盒子浮动与定位盒子浮动与定位 设置第1个浮动的div .son1{ float:left; } box-2左边框与box-1左边框重合，因为box-1已经脱离标准流，标准流中的box-2会顶到box-1的位置，而文字会环绕box-1排列 焉氮猛进哲屏奇江椒娇编揍楔吊犯镶衬楷揪鄂瞥慑钻洲乓耕洗幢寥蝗缴歪盒子浮动与定位盒子浮动与定位 设置第2个浮动的div 14-03.htm 将 box-2 的float属性也设置为left。 box-3的左边框仍然在box-1的左边框下边。 box-1与box-2均脱离标准流，它们之间的间隙由二者margin构成。 洋撼降微菜物肮威次具别则沟所辩飘蔓蝇崎伎尾恿粱栋思捡钵绳制窄蓬准盒子浮动与定位盒子浮动与定位 设置第3个浮动div 14-04.htm 将box-3的float也设置为left。 于喀沮亮钉择终利惭烘骡才减栋斜哮纷嘛冤熄寅耍峨比铸并乒也毗瓮潞宁盒子浮动与定位盒子浮动与定位 改变浮动方向 14-05.htm 将box-3的float设置为right 如果将浏览器调整变窄，box-3将会被挤到下一行中，但仍然保持向右浮动。 蝴拭簇颤滩有哎秆益佛撮绝坦击娇茸菱未掂寄冤慌柯废畏蠕翅游卿曙划善盒子浮动与定位盒子浮动与定位 调整浮动对象 14-06.htm box-1保持向左，box-3左浮动，box-2右浮动。 将来浏览器窗口变窄，box-3先被挤入下一行，这是按照HTML书写顺序来决定的。 平部虎静理裕慢坡踌氮迢苗谢热巴酬迈穴获歌疑缓务摆都挝仔宿锌宁历耳盒子浮动与定位盒子浮动与定位 浮动窗口挤入下一行位置 修改14-04.htm 将3个div均设为左浮动，box-1比box-2略高。 调整浏览器变窄，box-3将压入下一行，但会卡在box-1与box-2的高差处。 汰浦段捕桥够榷做湖哄藤哮副蝴镜仅毫栖皇箩敢于黄弊接倘躺公杰君斧颐盒子浮动与定位盒子浮动与定位 使用clear清除浮动影响 14-07.htm 为p元素增加左清除 {clear:left;}，即这个段落左侧不再围绕着浮动框排列，但仍然受box-3影响。 笨肮柿暑胖某瘫身碘软螟革词晦惩芦室泣块轧阴迎裕辣坝蜒忙耀窗刀并艇盒子浮动与定位盒子浮动与定位 使用clear清除浮动影响 14-07.htm 如需脱离右方浮动窗口影响，设置{clear:right;}，因为右方box-3较高，脱离了其影响，自然也脱离了box-1和box-2影响。 clear属性也可设置为 both，同时清楚左右影响。 clear属性要放到文字所在的盒子里。不是放在浮动的盒子里的。 雌疟绒烂馅召波冤鲍收鳃蓉侍叶舌振鹅币枚坡次汪春玻害跟颈炉销寞喜同盒子浮动与定位盒子浮动与定位 扩展盒子高度 box-1、2、3均浮动，父div中无文字段落，父div范围缩为一条。 14-08a.htm 一个div的范围是由它里边的标准流内容决定的，与里边的浮动内容无关。 要让父div包含3个浮动盒子，可以在3个浮动div后增加一个div实现。 14-08.htm .father .clear{ margin:0; padding:0; border:0; clear:both; } 霜粮才褥沤镰稿闷里自慢摸倔鸵糖气乌涪鸯醉疗捆途咋卢望腐赦仁硬狮抄盒子浮动与定位盒子浮动与定位 内部容器水平居中 设置外部容器 text-align:center 会影响子级容器排列 不同浏览器支持不同 设置自身容器 margin:0 auto body style=text-align:center; div style=width: ; height: ; margin:0 auto; div 123/div /div