发表于: 2018-05-21 22:34:15
1 545
今天完成的事情:今天没有什么进度,找了下实现轮播图的方法,还没有实践。看了《权威指南》的浮动章节,因为任务二后浮动都很少使用;
明天计划的事情:开始任务14;
今天的收获:
1、浮动会将元素从正常文档流删除,
2、元素周围的外边距不会合并,普通文档流中的margin要是重叠的话是会合并的,合并的值取大的那个!
设置浮动之前要先创建包含块;
3、浮动元素会生成一个块级框,这个元素会变成块级元素,而不管这个元素本身是什么;
控制浮动的规则:
1、浮动元素的左、右边界不能超过其包含块的内边界,就是说浮动元素不能超出他的“伪父级”的框里;
2、浮动元素必须是左、右边界必须是源文档中之前出现的左浮动的靠左、右边界;这代表一个元素必须是“紧挨着”另一个浮动元素,而不是会产生覆盖;如果一个浮动元素的顶端在所有之前浮动元素的底端,他可以一直浮动到父元素的内边界!
3、宽度不够时浮动元素不会重叠,而是后面的浮动元素向下浮动,直到它的顶端在之前的浮动元素底端;
4、浮动元素的顶端不能比父元素的内顶端更高!如果浮动元素在两个外边距合并之间,放置这个浮动元素时就好像在两个元素之间有一个块级父元素,这样防止浮动元素一直浮动到共同父元素的顶端; 5、浮动元素不能比之前所有的浮动元素或块级元素的顶端更高!
6、不允许浮动元素到包含这个浮动元素之前内容的行的顶端之上,就是说把别的内容挤到下面去!
clear属性规定元素的哪一侧不允许有其他浮动元素。
取值:
- left:元素左侧不允许有浮动元素
- right:元素右侧不允许有浮动元素
- both:元素左右两侧均不允许有浮动元素
- none:默认值,允许浮动元素出现在两侧
具体原理:在元素上外边距之上增加清除空间,比如清除左浮动会让元素的上外边距刚好在左边浮动元素的下外边距之下。
清除浮动可两大类方法
- 兄弟元素设置clear:both
- 父元素生成BFC(IE8+) 或haslayout(IE6/IE7)
评论