目录
今天给大家分享浮动会带来的一些都会遇到的问题。
一、什么是浮动?
1、含义:浮动属性是float用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
2、作用:浮动可以改变元素标签默认的排列方式,可以让多个块级标签一行内排列显示。可以利用浮动完成标准流没办法完成的布局效果。
3、浮动的特点
1.元素一旦浮动,脱离文档流(不占页面空间,后面未浮动元素会上前补位)
2.浮动元素会在当前行,停靠在父元素的左/右边,或者停靠在其他已浮动元素的边缘
3.当父元素横向显示不下所有浮动元素时,最后显示不下的,会自动换行
4.浮动用于解决,多个块级元素在同一行显示的问题
二、浮动产生的影响(问题)
(1)由于浮动元素脱离了文档流,所以父元素的高度无法被撑开,影响了与父元素同级的元素;若没有给父元素设置高度,那么父元素就不会在显示屏上显示。
(2)与浮动元素同级的非浮动元素会跟随其后,因为浮动元素脱离文档流不占据原来的位置
(3)如果该浮动元素不是第一个浮动元素,则该元素之前的元素也需要浮动,否则容易影响页面的结构显示
三、清除浮动--解决浮动带来的问题
1、后续标准流被覆盖
由于元素浮动之后,会脱离文档流,不占位置,会让后续不浮动的元素上前补位.浮动的元素就会遮盖住后续标准流。
如果后续元素不想上前补位,需要对此元素设置清除浮动 clear:
取值:1.left 清除左浮动对我的影响
2.right 清除右浮动对我的影响
3.both 清除左右浮动对我的影响
4.none 不清除影响
给box1添加浮动后