浮动和清除浮动(详细讲述) | 您所在的位置:网站首页 › 清除浮动和设置浮动是否矛盾 › 浮动和清除浮动(详细讲述) |
目录 为什么需要浮动? 什么是浮动? 浮动特性(重难点) (1)浮动元素会脱离标准流(脱标) (2)浮动的元素会一行内显示并且元素顶部对齐 (3)浮动的元素会具有行内块元素的特性 浮动元素经常和标准流父级搭配使用 清除浮动的四种方法 1:额外标签法 3::after 伪元素法,为父元素清除浮动 4::after和:before双伪元素清除浮动 为什么需要浮动?提问:我们用标准流能很方便的实现如下效果吗? 如何让多个块级盒子(div)水平排列成一行? 比较难,虽然转换为行内块元素可以实现一行显示,但是他们之间会有大的空白缝隙,很难控制 如何实现两个盒子的左右对齐? 总结: 有很多的布局效果,标准流没有办法完成,此时就可以利用浮动完成布局。 因为浮动可以改变元素标签默认的排列方式。 浮动最典型的应用:可以让多个块级元素一行内排列显示。 网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动! 拓展:浮动的盒子不会发生外边距合并! 什么是浮动?float 属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。 语法: 选择器 { float: 属性值;} 属性描述 |
CopyRight 2018-2019 实验室设备网 版权所有 |