王老师html零基础学习笔记第9课—浮动+清除浮动

原创 老王  2020-07-10 19:36:48  阅读 543 次 评论 0 条
摘要:

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框

浮动

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


文档流:是文档中可显示对象在排列时所占用的位置/空间(在页面中占位置)。


脱离文档流:在页面中不占位置, CSS 中,通过 float 属性实现元素的浮动。


任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。


浮动的一般情况

浮动一般情况 王老师html零基础学习笔记第9课—定位+层级关系  王老师html零基础学习笔记第9课—浮动+清除浮动 第1张



浮动的特殊般情况

浮动特殊情况 王老师html零基础学习笔记第9课—定位+层级关系  王老师html零基础学习笔记第9课—浮动+清除浮动 第2张

浮动对文字的影响

浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。因此,创建浮动框可以使文本围绕图像

浮动 王老师html零基础学习笔记第9课—定位+层级关系  王老师html零基础学习笔记第9课—浮动+清除浮动 第3张


浮动float和inline-block的比较

浮动float和inline-block的比较 王老师html零基础学习笔记第9课—定位+层级关系  王老师html零基础学习笔记第9课—浮动+清除浮动 第4张

清除浮动

为什么清除浮动?float浮动造成元素父级高度塌陷


清除浮动的多种方法:


1、最后添加空标签clear属性值:left   right   both


2、父级办法:


a. 加高                           问题:扩展性不好

b. inline-block 清浮动方法:问题:margin:auto失效;

c. overflow:hidden 清浮动方法; 

d. after伪类  元素内部末尾添加内容          (时下主流)

.clearfix{zoom:1;}

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


本文地址:http://www.wangfangwen.com/post/92.html
版权声明:本文为原创文章,版权归 老王 所有,欢迎分享本文,转载请保留出处!
阿里云服务器优惠券
减肥不为美,只为走路不磨腿,付出不亚于任何人的努力,成功永远没有尽头,只有岔路口...

发表评论


表情

还没有留言,还不快点抢沙发?