聊城网站优化网络推广,高密市网站建设,哔哩哔哩网页版怎么退出登录,企业网站开发培训本文参考
https://blog.csdn.net/ZhangJiWei_2019/article/details/114669722
二、浮动
浮动的元素会向左或向右浮动#xff0c;直到碰到前面已经有浮动的元素或者是其父元素的边框为止。浮动的元素会脱离文档流#xff08;不再占有原来的位置#xff09;。
#xff08…本文参考
https://blog.csdn.net/ZhangJiWei_2019/article/details/114669722
二、浮动
浮动的元素会向左或向右浮动直到碰到前面已经有浮动的元素或者是其父元素的边框为止。浮动的元素会脱离文档流不再占有原来的位置。
一左右浮动
块级元素除了使用display: inline-block;可以使其共占一行外还可以使用浮动来实现。
还是两个div的例子正常状态下是这个效果。 我们给这两个div加一个外层容器作为他们的父容器
.father-box {border: #FF0000 4px solid;
}div classfather-boxdiv classbox1/divdiv classbox2/div
/div给第一个div设置向左浮动效果
div classfather-boxdiv classbox stylefloat: left;1/divdiv classbox2/div
/div可以看到页面效果发生了变化第二个div不见了其实第二个div并没有消失而是第一个div浮动起来之后它的空间被释放出来脱离文档流不占有原来的空间第二个div进行了向前补位去到了原本第一个div的位置被浮起来的第一个div遮挡住了。简而言之浮动的元素脱离了这个平面去到了这个平面的上方。
但浮动的元素不是无限制的浮动而是在自己父容器范围内浮动向左浮动时碰到其父容器的左边缘或者该元素前面其它已经浮动的元素就会停止。
这里的第一个div就是碰到了其父元素的左边框停止的。
接下来我们给第二个div也加上浮动
div classfather-boxdiv classbox stylefloat: left;1/divdiv classbox stylefloat: left;2/div
/div这时第二个div也浮了起来两个div又到了同一个平面上第二个div因为碰到了前面已经浮动的第一个div停止了浮动 (二清除浮动所带来的影响 虽然元素浮动起来之后可以实现共占一行的效果但是也给其父元素和后面的元素产生了影响所以就有了清除浮动所带来的影响的方法。
1. 清除第一种影响对父元素产生的影响。 上面的例子两个div都浮动起来之后因为脱离了出来导致其父容器内没有了东西所以父容器的高度也没法被撑开看上去像变成了一条线。
1给父容器加高度清除影响
.father-box {border: #FF0000 4px solid;height: 200px;
}2给父容器加overflow: auto或overflow: hidden清除影响 两种方式都可让父容器的高度恢复。
2. 清除第二种影响对后面元素产生的影响。
先回到没有清除影响的时候
.father-box {border: #FF0000 4px solid;
}我们再加一个div而且不设置浮动
div classfather-boxdiv classbox stylefloat: left;1/divdiv classbox stylefloat: left;2/divdiv classbox3/div
/div这时页面效果中父元素的高被新增的div撑开但是由于该div没有浮动还在这两个div的下层自动补位到了第一个div的下面被第一个div所遮挡住看不见。
要想让浮动元素的后续元素不自动向前补位也就是说即使元素浮动了原本的位置要给它留出来我们可以使用clear来清除这个影响它的值有left、right、bothleft代表清除左浮动带来的影响right代表清除右浮动带来的影响both代表两者都清除。
我们需要多加一个空白元素来执行清除影响
div classfather-boxdiv classbox stylefloat: left;1/divdiv classbox stylefloat: left;2/div!-- 使用一个空的 div 清除浮动 --div styleclear: both;/divdiv classbox3/div
/div第三个div恢复原有的排版独占一行。
向右浮动同理这里不再讲述。
本例完整代码
!DOCTYPE html
html
headmeta charsetutf-8title浮动/titlestyle.box {width: 100px;height: 100px;background-color: red;color: white;padding: 20px;margin: 20px;box-sizing: border-box;}.father-box {border: #FF0000 4px solid;}/style
/head
bodydiv classfather-boxdiv classbox stylefloat: left;1/divdiv classbox stylefloat: left;2/div!-- 使用一个空的 div 清除浮动 --div styleclear: both;/divdiv classbox3/div/div
/body
/html
