css浮动后页面乱了怎样解决,详解浮动元素引起的问题和解决办法

一、问题

多个浮动的元素无法撑开父元素的宽度，父元素的高度可能会变成0。

若浮动元素后面跟非浮动元素，非浮动元素会紧随其后浮动起来。

若浮动元素前面还有同级元素没有浮动则会影响页面结构。

二、解决办法

1.clear:both

在最后一个浮动元素后面添加属性为clear:both;的元素。

div.parent>div.fl{

float: left;

width: 200px;

height: 200px;

margin-right: 20px;

border: 1px solid red;

}

.clear{

clear: both;

}

给父元素添加clear:both;属性的:after伪元素。

div.parent>div.fl{

float: left;

width: 200px;

height: 200px;

margin-right: 20px;

border: 1px solid red;

}

.clear:after{

content: '';

display: block;

clear: both;

}

注意：伪元素默认是内联水平，所以借助伪元素时要设置属性display: block;。

2.overflow:auto / overflow: hidden

div.parent{

overflow: auto;

/*overflow: hidden;也可以*/

}

div.parent>div.fl{

float: left;

width: 200px;

height: 200px;

margin-right: 20px;

border: 1px solid red;

}

3.浮动父级元素

div.parent{

float: left;

}

div.parent>div.fl{

float: left;

width: 200px;

height: 200px;

margin-right: 20px;

border: 1px solid red;

}

注意：一般不用这个方法，会引起父级元素排版问题。

到此这篇关于详解浮动元素引起的问题和解决办法的文章就介绍到这了,更多相关浮动元素引起问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

css浮动后页面乱了怎样解决,详解浮动元素引起的问题和解决办法相关推荐

计算机打开程序乱码,打开软件乱码怎么解决,详解win7电脑打开软件乱码的解决方法...
今天小编给大家详解win7电脑打开软件乱码的解决方法,使用win7系统过程中,有时用户会遇到电脑打不开软件,打开乱码的问题,为此问题困扰的用户,可参照以下的方法进行解决. 最近有位win7系统用户使用 ...
css三种定位都脱离文档流了吗,CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别...
1.代码 (1)示例代码1 CSS布局之脱离文档流详解--浮动.绝对定位脱离文档流的区别 .left { width: 300px; height: 500px; background: red; f ...
php带旋转动画刷新页面,css旋转动画效果的简单实现示例详解
我们可以通过css来做出动画效果,下面我为大家演示的是p的旋转,颜色过渡的动画 a{ text-align:center; line-height:100px; transition:all 2s; ...
html怎么添加积分系统,CSS动画实现领积分效果的思路详解
最近项目中要做一个领积分的效果,根据老板的描述,这个效果类似于支付宝蚂蚁森林里的领取能量.整体效果是就是在树周围飘着几个积分元素,上下滑动,类似星星闪烁,点击领取后,沿着树中心的位置滑动并消失,树上的 ...
【git】git冲突解决详解
git冲突解决详解方法1:pull下来然后修改冲突文件方法2: cherry-pick然后checkout git merge时,不免产生各种各样的冲突,可是我们连如何选择版本都晕半天,这里进行详 ...
mysql安装后目录介绍,MySQL安装后的目录结构及配置文件详解
MySQL安装后的目录结构及配置文件详解 MySQL安装后的目录结构及配置文件详解 MySQL目录结构说明 MySQL 安装完成后,会在磁盘上生成一个目录,该目录就被称为 MySQL 的安装目录. M ...
IOS开发环境更换后重新制作Provisioning Profile证书详解
IOS开发环境更换后重新制作Provisioning Profile证书详解新换了台Macbook,又折腾了一遍Provisioning Profile证书,苹果的证书繁锁复杂,每次制作都相当麻烦, ...
java前端长连接框架_Java中Spring Boot+Socket实现与html页面的长连接实例详解
Spring Boot+Socket实现与html页面的长连接,客户端给服务器端发消息,服务器给客户端轮询发送消息,附案例源码功能介绍客户端给所有在线用户发送消息客户端给指定在线用户发送消息服务器 ...
SVN 树冲突解决详解
SVN 树冲突解决详解 https://blog.51cto.com/u_15047490/4217803?abTest=51cto

css浮动后页面乱了怎样解决,详解浮动元素引起的问题和解决办法

css浮动后页面乱了怎样解决,详解浮动元素引起的问题和解决办法相关推荐

最新文章

热门文章