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

原创 老王  2020-06-17 10:04:53  阅读 173 次 评论 0 条
摘要:

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


浮动

浮动的定义:使元素脱离文档流,按照指定方向(左右)发生移动,遇到父边界或者相邻的浮动元素停了下来。  文档流:是文档中可显示对象在排列时所占用的位置/空间(在页面中占位置)。  脱离文档流:在页面中不占位置, CSS 中,通过 float 属性实现元素的浮动。  任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。

浮动的一般情况

未命名  CSS3样式 html 王老师html零基础学习笔记第8课—浮动+清除浮动 王老师html零基础学习笔记第9课—浮动+清除浮动 第1张

浮动的特殊般情况

未命名  CSS3样式 html 王老师html零基础学习笔记第8课—浮动+清除浮动 王老师html零基础学习笔记第9课—浮动+清除浮动 第2张

浮动对文字的影响

浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。因此,创建浮动框可以使文本围绕图像未命名  CSS3样式 html 王老师html零基础学习笔记第8课—浮动+清除浮动 王老师html零基础学习笔记第9课—浮动+清除浮动 第3张

浮动float和inline-block的比较

未命名  CSS3样式 html 王老师html零基础学习笔记第8课—浮动+清除浮动 王老师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://wangfangwen.com/post/85.html
版权声明:本文为原创文章,版权归 老王 所有,欢迎分享本文,转载请保留出处!
NEXT:已经是最新一篇了
阿里云服务器优惠券
减肥不为美,只为走路不磨腿,付出不亚于任何人的努力,成功永远没有尽头,只有岔路口...

发表评论


表情

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