浮动元素出现哪些问题？如何处理？

发布时间：2022-11-12 11:20:01 所属栏目：编程来源：

导读：　　本文主要给大家分享浮动元素的内容，对于浮动元素的使用可能会出现多种问题，导致后面的布局混乱等等，下面我们就来看看浮动元素常见的问题及解决方法，感兴趣的朋友就继续往下看吧。
　　
　　一、问题
　　

　　本文主要给大家分享浮动元素的内容，对于浮动元素的使用可能会出现多种问题，导致后面的布局混乱等等，下面我们就来看看浮动元素常见的问题及解决方法，感兴趣的朋友就继续往下看吧。
　　
　　一、问题
　　
　　多个浮动的元素无法撑开父元素的宽度，父元素的高度可能会变成0。
　　若浮动元素后面跟非浮动元素，非浮动元素会紧随其后浮动起来。
　　若浮动元素前面还有同级元素没有浮动则会影响页面结构。
　　二、解决办法
　　
　　1.clear:both
　　
　　在最后一个浮动元素后面添加属性为clear:both;的元素。
　　
　　<style>
　　div.parent>div.fl{
　　    float: left;
　　    width: 200px;
　　    height: 200px;
　　    margin-right: 20px;
　　    border: 1px solid red;
　　}
　　.clear{
　　    clear: both;
　　}
　　</style>
　　<div class="parent">
　　    <div class="fl">1</div>
　　    <div class="fl">2</div>
　　    <div class="fl">3</div>
　　    <div class="fl">4</div>
　　    <div class="clear">5</div>
　　</div>
　　给父元素添加clear:both;属性的:after伪元素。
　　
　　<style>
　　div.parent>div.fl{
　　    float: left;
　　    width: 200px;
　　    height: 200px;
　　    margin-right: 20px;
　　    border: 1px solid red;
　　}
　　.clear:after{
　　    content: '';
　　    display: block;
　　    clear: both;
　　}
　　</style>
　　<div class="parent clear">
　　    <div class="fl">1</div>
　　    <div class="fl">2</div>
　　    <div class="fl">3</div>
　　    <div class="fl">4</div>
　　</div>
　　注意：伪元素默认是内联水平，所以借助伪元素时要设置属性display: block;。
　　
　　2.overflow:auto / overflow: hidden
　　
　　<style>
　　div.parent{
　　    overflow: auto;
　　    /*overflow: hidden;也可以*/
　　}
　　div.parent>div.fl{
　　    float: left;
　　    width: 200px;
　　    height: 200px;
　　    margin-right: 20px;
　　    border: 1px solid red;
　　}
　　</style>
　　<div class="parent">
　　    <div class="fl">1</div>
　　    <div class="fl">2</div>
　　    <div class="fl">3</div>
　　    <div class="fl">4</div>
　　</div>
　　3.浮动父级元素
　　
　　<style>
　　div.parent{
　　    float: left;
　　}

（编辑：PHP编程网 - 湛江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

什么是生成树生成树	Python __repr__ 方法
C++ static静态成员变	C++继承时的名字遮蔽问

浮动元素出 现哪些问题？如何处理？

浮动元素出现哪些问题？如何处理？