css基础布局笔记之—浮动(复习向)

浮动的定义:使元素脱离文档流,按照指定方向(左右)发生移动,遇到父级边界或者相邻的浮动元素停了下来。


浮动中将会遇到的问题

第一种情况 导致的各种布局混乱问题  

(浮动元素不占位置导致的布局变化)

第二种情况 浮动的元素只影响他后面的元素    根据层叠顺序推算

第三种情况 导致的各种掉盒子问题  

如果父级宽度太窄,无法容纳所有元素,无法容纳的元素会掉下去,之后还是会执行浮动,向左或 者向右知道遇到边框就会停下来!

第四种情况 导致的各种被卡住问题  

浮动的元素高度不同,并且外面盒子宽度不够的情况下,往下掉的过程中可能会被卡住


float元素的特性

设置了浮动的元素,变成浮动元素,具备浮动元素特性

都支持横排显示 

都支持宽高  

不给宽度的时候默认内容撑开宽高  

支持margin padding  

不支持margin:auto;  

浮动脱离文档流  

浮动提升层级半级 概念性理解,其实和层级没关系,只有定位有层级


清除浮动

  • 为什么要清除浮动呢?

浮动元素不占位置,由于不占位置导致父级的塌陷影响布局 (内容为0高度,父级高度由内容撑开的时候,也为0)

  • 清除浮动的原则: (清除浮动乃是清除浮动给父级带来的影响)

1.浮动元素本身不能清除浮动 比如div 设置了float 不能直接给div 运用clear来清除浮动   

2.哪里浮动,哪里给父元素清除!即浮动之后要立马解决这里由于浮动带来的影响! 以免对后面的布局造成影响!

  • 清除浮动的方式

 clear:both;

子元素方式:最后添加空标签

/*缺点:在ulli要注意 因为不能嵌套块级 并且浮动元素本身不能清除浮动*/

<div style='clear:both;'></div>

给父级用的方法

1.给父元素添加高度  缺点是扩展性不好,一般都是内容撑开高度  

2.给父级inline­block  缺点是中间会解析空格   

3.overflow:hidden;  需要溢出隐藏的时候你就写,这样就不用写清楚浮动的样了   

4.after伪类

.clearfix:after{content:'';display:block;clear:both;} 

解决低版本ie的兼容性问题

.clearfix{zoom:1;} 


min­width 属性为给定元素设置最小宽度。它可以阻止 width 属性的应用值小于 min­width 的值。

max­width 属性用来给元素设置最大宽度值.

猜你喜欢

转载自www.cnblogs.com/chengl062/p/11408815.html
今日推荐