黑马程序员技术交流社区

标题: 学习笔记——第4节浮动 [打印本页]

作者: Zy_阿匠 时间: 2017-1-3 16:37
标题: 学习笔记——第4节浮动
本帖最后由 Zy_阿匠于 2017-1-4 18:08 编辑

第一部分
第1课时
1、原生的html页面都是按照流式布局进行排列，也就是从上到下，从左到右的顺序进行排列
2、行内标签根据布局默认进行从左到右从上到下排列，块级元素因为都占据一行，所以默认
   情况下都是按照从上到下排列
第2课时
1、浮动是解决页面中，块级元素相互布局的一种方法。设置浮动的块级元素，可以脱离文档流的
   布局（从上到下，从左到右的流动布局），与其他块级元素同在一行中显示。虽然设置浮动的
   块级元素不影响其他块级元素的在文档流中的布局，但也会对块级元素的内容产生影响
2、浮动的属性flot，属性值分别为：
   Float: none；默认设置，无浮动
   Float: left；设置元素左浮动
   Float：right;设置元素右浮动
3、案例：

第3课时
1、浮动的特性：
* 浮动脱离了文档的标准流，虽然不占据位置，但却影响了标准流的布局；浮动只有左浮动和右浮动
* 浮动元素a跟上一个元素有关系，如果上一个元素有浮动，则与其顶部进行对齐，并列显示；如果上一个元素无浮动，则与其底部对齐显示
* 父元素里有子元素，如果其中一个子元素有浮动，则只有当其他所有子元素都浮动时，才能对齐显示
* 浮动元素根据书写的位置来显示相应的浮动
* 当元素添加了浮动后，就具有了行内块级元素的特性，元素的大小完全取决于定义的大小或内容的大小，也就具有了包裹性
* 元素浮动后，破坏了原来正常文档流布局，造成内容塌陷。假如有标准流中的父元素a和子元素b，a没有设置宽高，如果b浮动，则b的宽高将会成为0，这就是造成了内容的塌陷
2、案例1-关系：

3、案例2-塌陷

第4课时
1、如果标准流中的父元素没有设置宽高、子元素设置浮动时，则会造成父元素的内容塌陷；解决的方式之一为
给父元素设置overfloat属性
2、overfloar属性的属性值一共有四个，即：
* Visible，超出父元素宽高时，正常显示内容；
* Hidden，超出父元素宽高时，隐藏超出部分
* Auto，父元素自适应其所包裹的内容宽高，当内容超出父元素的宽高时，显示滚动条显示；当内容没有超出父元素的宽高时，正常显示
* Scroll，无论父元素包裹的内容是否超出父元素的宽高时，都会显示滚动条
3、案例-解决塌陷

第5课时
1、overfloat的属性原理是，它会触发块级元素的BFC，bfc可以让块级元素具有独立布局内部内容和所包裹元素的权利，而又不会受到外部其他元素的影响；
2、可以触发块级元素BFC的属性有，overfloat、position、display:table、block等
第二部分
第1课时
自适应网站布局案例：

第2课时
2个案例，分别设计到内容塌陷的解决方法及清除浮动的运用
1、第一个案例，全浮动居中，内容塌陷的解决方法

2、第二个案例，清除浮动方法的运用
清除浮动的属性为clear，其属性值为：left、right、both，案例如下：

第3课时
清除浮动的四种方法：
* 隔墙法，是建立一个空的div标签，并设置其清除属性，这样下面的块级标签就会依着空div标签进行流式布局，而不会跑到上面
* 设置overflow属性，属性值即：hidden、visible、scroll、auto；
* 使用after伪对象清除父元素下浮动
* 使用before伪对象清除父元素上浮动
第4课时
clearfix的原理及闭合场景的解决方案
1、实际开发中，网站整体布局中，主版心div，有2件重要的事：
* 其一是要触发div的BFC，使其可以自适应包裹其内的子元素，并且尽量不要设置高度，保持它的可移植性；可以触发BFC的主要方法为：设置属性overflow，使其父div具有包裹性；另外一种是设置display:table/block/in-block
* 其二是要清除主版心div的上浮动和下浮动，所要用到的方法为，使用伪类:after及:before after
2、clearfix的应用案例：

作者: 方传奇 时间: 2017-1-7 18:48
好帖，谢谢分享

作者: 浮世散人 时间: 2017-1-8 00:45
总记得很不需哦

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2