清楚浮动的几种方法

最新推荐文章于 2024-07-09 10:46:36 发布
最新推荐文章于 2024-07-09 10:46:36 发布
阅读量412 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qishuixian/article/details/50773139
版权

清楚浮动的几种方法

为什么我们用float：left/right之后会对其父辈或兄弟元素产生影响：浮动框不在普通的文档流中，它脱离了文档流，所以包围的内容的不占据空间。如下面的代码：

<!DOCTYPEhtml>

<html>

<head>

         <title></title>

</head>

<styletype="text/css">

div{

         background-color: #00000;

}

.fl{

         float: left;

}

.fr{

         float: right;

}

</style>

<body>

         <div>

                   <pclass="fl">1221233</p>

                   <pclass="fr">uriiot</p>

         </div>

   <p>rrr</p>

</body>

</html>

 

如何让包围的元素在视觉上包围浮动元素呢？

1、在紧靠最后一个浮动元素之后添加一个空元素并清理浮动。

<!DOCTYPEhtml>

<html>

<head>

         <title></title>

</head>

<styletype="text/css">

.....

.clear{

clear:both;

}

</style>

<body>

         <div>

                   <pclass="fl">1221233</p>

                   <pclass="fr">uriiot</p>

                   <pclass="clear"> </p>

         </div>

    <p>rrr</p>

</body>

</html>

 

2、对浮动元素的父辈元素进行浮动（这种方法会对父辈的后面的兄弟元素有影响）

<!DOCTYPEhtml>

<html>

<head>

         <title></title>

</head>

<styletype="text/css">

div{

         background-color: #00000;

         float: left;

}

.fl{

         float: left;

}

.fr{

         float: right;

}

.clear{

         clear: both;

}

</style>

<body>

         <div>

                   <pclass="fl">1221233</p>

                   <pclass="fr">uriiot</p>

         </div>

         <p>rrr</p>

</body>

</html>


3、使用overflow属性（overflow：hidden、auto、overflow。（可是其会自动清理包含的任何浮动元素）

<styletype="text/css">

div{

         background-color: #00000;

         overflow: hidden;

.fl{

         float: left;

}

.fr{

         float: right;

}

.clear{

         clear: both;

}

</style>

<body>

         <div>

                   <pclass="fl">1221233</p>

                   <pclass="fr">uriiot</p>

         </div>

         <p>rrr</p>

</body>

 

4、结合使用：after伪类。

<styletype="text/css">

div{

         background-color: #00000;}

.fl{

         float: left;

}

.fr{

         float: right;

}

.fr:after{

         clear: both;

}

</style>

<body>

         <div>

                   <pclass="fl">1221233</p>

                   <pclass="fr">uriiot</p>

         </div>

         <p>rrr</p>

</body>


5.overflow与zoom的结合使用；

<!DOCTYPEhtml>

<html>

<head>

         <title></title>

</head>

<styletype="text/css">

div{

         background-color: #00000;

         overflow: auto;//也可以改为overflow:hidden;

         zoom:1;

}

.fl{

         float: left;

}

.fr{

         float: right;

}

</style>

<body>

         <div>

                   <pclass="fl">1221233</p>

                   <pclass="fr">uriiot</p>

         </div>

         <pclass="clear">rrr</p>

</body>

</html>


6、overflow与width结合

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<style type="text/css">

div{

    background-color:#00000;

    overflow:auto;//也可以改为overflow: hidden;

    width: 100%;

}

.fl{

    float: left;

}

.fr{

    float: right;

}

</style>

<body>

    <div>

       <pclass="fl">1221233</p>

       <pclass="fr">uriiot</p>

    </div>

    <pclass="clear">rrr</p>

</body>

</html>

 

 

web行路人
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
常用的清除浮动的方法
JackieDYH的博客
03-02 548
清除浮动 在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动 例子 .news { background-color: gray; border: solid 1px black; } .news img { float
float浮动：浮动的优点？缺点？清楚浮动的几种方式？
HZ___ZH的博客
11-23 1186
浮动： 浮动布局简介:当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变现的好像浮动元素不存在一样。 优点： 1.图文混排的时候可以很好的使文字环绕在图片周围。 2.当元素浮动了起来之后，它有着块级元素的一些性质例如可以设置宽高等. 3.但它与inline-block还是有一些区别的 第一个就是关于横向排序的时候，float可以设置方向而inline-block方向是固定的； 还有一个就是inlin
清除浮动方法（6种）
weixin_44572736的博客
01-19 1055
清除浮动方法清除浮动的方法1. **方法一**；2.方法二3.方法三 **高度清除浮动法**4.方法四 **用overflow清除浮动**5.方法五 用clear 标签清除浮动6.方法六 用定位清除浮动 浮动元素代码 float属性：让元素进行浮动 left 左浮动； right 右浮动； 清除浮动元素属性 clear属性：清除浮动； left 在左侧不允许浮动元素； right 在右侧不允许浮动...
清除浮动的四种方式及其原理理解
weixin_34072857的博客
10-18 3215
本文介绍了四种清除浮动的方法，并尝试解释其原理。在理解了各种清除浮动的原理之后，你会发现，很多清除浮动的方法本质上其实是一样的。掌握这些原理，相信你可以根据场景和需求，灵活运用原则发展出不同的清除浮动的方法，而不再死记或拘泥于文中提到的方法。 一、为什么要清除浮动 在讲清除浮动的方法之前，我们先来了解一下为什么要清除浮动，清除浮动的目的是什么，即，要解决什么样的问题。来看一个浮动的例子(略去了文字...
清除浮动的最常用的四种方法，以及优缺点
热门推荐
h_qingyi的博客
07-29 28万+
为什么要清除浮动？ 清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题 1.如下，我给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子 2.当我给内部两个盒子加上float属性的时候 顶部深蓝色盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了   总结...
关于三栏布局（浮动法/定位法/margin负值法）
Beng_shakalaka的博客
07-18 1433
三栏布局就是页面布局主要分为左中右三个部分，普遍为左、右固定中间自适应的形式。 1.定位法三栏布局：CSS代码：html , body { margin: 0; padding:0; height: 100%; } #right ,#left { position: absolute; /*设置定位*/
清除浮动的几种简单方法：万能清除浮动法，clear:both......
wangzhixiangcopy的博客
07-29 9373
方法一：给父级元素添加声明：overflow:hidden;。 例： .wrap{ border:3px solid #000;overflow:hidden;} .box01{ width:500px; height:500px; background:#F00; float:left;} .box02{ width:500px; height:500px; background:#09F; ...
清浮动的方法
asdfgv2022的博客
08-03 3163
css精灵英文叫法 css sprites，通常被解释为“CSS 图像拼合”或“CSS 贴图定位”；其实就 是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”， “background- repeat”，“background-position”的组合进行背景定位，background-position 精确的定位出背景图片的位置css精灵图可以实现特殊形状的背景自由拉伸滑动，能适应不同字数的内容。...
清除浮动的五种方法详解
qq_43692768的博客
11-07 2万+
前言：   在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象，这个现象叫浮动溢出。为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。   清除浮动主要是为了解决父元素因为子级元素浮动引起的内部高度塌陷的问题。 实例：   HTML代码基本代码 <!DOCTYPE html> <html lang="
清除浮动的四种方法
A_home的博客
11-21 2909
浮动的元素会脱离标准流（文档流），浮动的盒子不再保留原先的位置，清除浮动的本质就是清除浮动元素带来的影响，策略——闭合浮动
在 HTML 中 清除浮动四种的方法
原地起飞
08-21 5254
文章目录为什么要清除浮动清除浮动本质一、语法二、清除浮动的方法1.额外标签法2.父级添加 overflow 属性3.父级添加 after 伪元素4.父级添加双伪元素 为什么要清除浮动     由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子（由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响）。 清除浮动本质 清除浮动的本质是清除浮动元素脱离标准流造成的影响 如果父盒子本身有高度，则不需要清除浮动 清除浮动之后，父级
html5 datalist 选中option选项后的触发事件
路在脚下，幸福在手中，莫贪！！！！！
11-02 2万+
使用input + datalist 实现自动补全功能，其中datalist中的内容是根据input输入的内容动态变换的，代码如下 function inputSelect(){ var input_select=$("#input").val(); var option_length=$("option").length; var option_id=''; for(var
requestNextAnimationFrame的使用
路在脚下，幸福在手中，莫贪！！！！！
11-21 4950
requestNextAnimationFrame的使用 为什么使用requestNextAnimationFrame的使用而不使用window.setInterval()或者window.setTimeout()制作的动画： 使用window.setInterval()或者window.setTimeout()制作的动画，有如下缺点： 1.他们都是通用的方法，并不是专为绘制动画而用 2.
iOS下Html页面中input获取焦点弹出键盘时挡问题
路在脚下，幸福在手中，莫贪！！！！！
05-15 4067
iOS下Html页面中input获取焦点弹出键盘时挡问题 原因： 1.ios之所以会遮挡输入框, 是因为, 第三方输入法的tool bar 或者 键盘也被当做可视区域了(包含在键盘弹出时的window.innerHeight) 2.js拿不到键盘的 弹起/收起 事件; 3.ios上键盘 弹起/收回 不会触发window.resize事件; 4.android 4.4 以下, 键盘唤起时,
前端开发之真机模拟调试
路在脚下，幸福在手中，莫贪！！！！！
11-04 3378
前端开发之真机模拟调试 昨天在晚上无意看到UC浏览器开发者版可以实现在手机上使用浏览器访问网页，便捷地进行网页语言调试。 UC浏览器开发者版地址介绍：http://plus.uc.cn/document/webapp/doc5.html.        1、安装adb：按照UC浏览器开发者版安装adb时出现各种各样的问题，于是请教了安卓的同事。他们把他们的安卓包给我，重新安装
meta的属性
路在脚下，幸福在手中，莫贪！！！！！
06-14 1745
meta的属性 参考文献：1、http://www.cnblogs.com/esshs/articles/157588.html                      2、http://www.oschina.net/question/54100_17414 1、Content-Type和Content-Language (显示字符集的设定) 　　说明：设定页面使用的字符集，用以说明主
为什么设置的背景图像不显示？
路在脚下，幸福在手中，莫贪！！！！！
11-22 1358
在表格的单元格中单击鼠标的左键，c
对为什么react需要时间分片，vue3不需要的浅学习
最新发布
路在脚下，幸福在手中，莫贪！！！！！
07-09 1136
Vue 3 通过编译器优化、响应式系统改进、虚拟 DOM 和 Diff 算法优化、单次异步队列、自动批处理等技术手段，大幅提升了渲染效率和性能。再加上现代浏览器的性能提升，使得 Vue 3 能够在大多数情况下提供流畅的用户体验，而无需借助时间分片等复杂的技术。
CSS清除浮动：8种方法全解析
"CSS清除浮动大全，包括8种方法，适用于不同浏览器，如ie, chrome, firefox, opera。这些方法旨在解决因元素浮动导致的布局问题，确保元素和其父级容器正确显示。" 在Web前端开发中，CSS浮动是一个重要的布局技术，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值