首页 > 代码库 > CSS学习笔记(float和盒子模型)
CSS学习笔记(float和盒子模型)
1、当元素或者是它的包裹层设置了绝对定位或者是浮动,那么margin:0 auto;自动居中的效果就不会实现。
2、盒子模型的三位立体结构图中从第一层到第五层依次为:border、content+padding、background-image、background-color、margin。
3、
设置了浮动属性(float)的元素:
1、会向指定方向(left或right)一直移动,直到容器边缘;
2、处于标准文档流中;
3、若不设置宽高,则以内容的宽高为准;
4、仅对紧邻的后续元素造成影响;
4、
清除浮动的常用方法
1、clear属性-常用clear:both;
2、clear:left,或者clear:right; 清除元素左侧或右侧的浮动
3、同时设置width:100%(或固定宽度)+overflow:hidden;也是可以清除浮动的。一般给受到浮动的元素设定的。
p{width:100%; overflow:hidden}或p{width:both}
4、在浮动元素的紧邻后续块元素之前加一个空标签(不推荐使用)
如果父包含层没有设置浮动,子包含层设置浮动,会对子包含层的父包含层和父包含层后面的会计元素产生影响!!所以要对父包含层设置清除浮动影响。
当父包含快缩成一条是,用clear:both清除浮动方法是无效的,clear:both一般用于紧邻后面的元素的清除浮动。
这种情况使用overflow:hidden会有效,
overflow:hidden 用来清除影响float对父级元素的浮动影响
clear:both;用来清除float对后面元素的浮动影响
CSS学习笔记(float和盒子模型)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。