浮动的定义:使元素脱离文档流,按照指定方向(左右)发生移动,遇到父级边界或者相邻的浮动元素停了下来。
浮动中将会遇到的问题
第一种情况 导致的各种布局混乱问题
(浮动元素不占位置导致的布局变化)
第二种情况 浮动的元素只影响他后面的元素 根据层叠顺序推算
第三种情况 导致的各种掉盒子问题
如果父级宽度太窄,无法容纳所有元素,无法容纳的元素会掉下去,之后还是会执行浮动,向左或 者向右知道遇到边框就会停下来!
第四种情况 导致的各种被卡住问题
浮动的元素高度不同,并且外面盒子宽度不够的情况下,往下掉的过程中可能会被卡住
float元素的特性
设置了浮动的元素,变成浮动元素,具备浮动元素特性
都支持横排显示
都支持宽高
不给宽度的时候默认内容撑开宽高
支持margin padding
不支持margin:auto;
浮动脱离文档流
浮动提升层级半级 概念性理解,其实和层级没关系,只有定位有层级
清除浮动
-
为什么要清除浮动呢?
浮动元素不占位置,由于不占位置导致父级的塌陷影响布局 (内容为0高度,父级高度由内容撑开的时候,也为0)
-
清除浮动的原则: (清除浮动乃是清除浮动给父级带来的影响)
1.浮动元素本身不能清除浮动 比如div 设置了float 不能直接给div 运用clear来清除浮动
2.哪里浮动,哪里给父元素清除!即浮动之后要立马解决这里由于浮动带来的影响! 以免对后面的布局造成影响!
-
清除浮动的方式
clear:both;
子元素方式:最后添加空标签
/*缺点:在ulli要注意 因为不能嵌套块级 并且浮动元素本身不能清除浮动*/ <div style='clear:both;'></div>
给父级用的方法
1.给父元素添加高度 缺点是扩展性不好,一般都是内容撑开高度
2.给父级inlineblock 缺点是中间会解析空格
3.overflow:hidden; 需要溢出隐藏的时候你就写,这样就不用写清楚浮动的样了
4.after伪类
.clearfix:after{content:'';display:block;clear:both;}
解决低版本ie的兼容性问题
.clearfix{zoom:1;}
minwidth 属性为给定元素设置最小宽度。它可以阻止 width 属性的应用值小于 minwidth 的值。
maxwidth 属性用来给元素设置最大宽度值.