百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

关于浮动清除的一些小感悟,4种方法清除浮动

yuyutoo 2025-04-06 00:10 4 浏览 0 评论

如何脱离标准文档流,css中给了三种方法,使一个元素脱离标准文档流。

1.浮动。 2.绝对定位。 3.固定定位。

一、 什么是浮动呢?定义这样说:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框另一个浮动框的边框为止。 其实也就是把快级元素变成能和别的快级并排成一行。

二、浮动的的元素有4点特性:

1.浮动元素会脱离标准文档流,已经不区分快和行了。

2.浮动的元素会互相贴靠。

3.浮动的元素有“字围”的效果。

4.收缩。一个浮动的元素,如果没有设置width,那么将自动收缩为文字的宽度。

三、清除浮动的方法。

1.给浮动的元素的祖先元素加高度(父元素或祖元素)。只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的元素了,也就是说,如果盒子内部有浮动,这个盒子有高,那么妥妥的,浮动不会互相影响。所以也就清除了浮动带来的影响。浮动的元素,只能被有高度的盒子关住。但是,工作上,我们绝对不会给所有的盒子加高度,这是因为麻烦,并且不能适应页面的快速变化。(不建议使用)

.

2.clear:both;清除掉两边的浮动。但是有一个非常致命的问题,margin失效了,上下之间没有了间距。

3.隔墙法。就是在两个部分之间加一个

,设置一个高度。还有就是“内墙发”:就是在块里边在放一个
,设置高度,不仅不让后边的去追前边的,并且能给外边的
撑出一个高度。

注:脱标的元素是不能把父元素撑出高度滴。

外墙法:

内墙法:

4.overflow:hidden; 一个父元素不能被自己浮动的儿子撑出高度。但是,只要给父亲加上 overflow:hidden;那么父元素就能被儿子撑出高度了。 最最最重要的是,使用overflow:hidden;能使margin生效!你没有看错,就是酱。

关于浮动的问题就酱啦,有什么不对的地方希望大家给给建议。

相关推荐

刚买的阿里云服务器怎么用(阿里云服务器买完如何使用)

刚买的阿里云服务器怎么用?阿里云服务器在购买之后,需要进行一些操作,比如配置安全组,修改密码,安装软件,导入数据库等。具体如下:1.买了云服务器,第一件事就是重置密码。登录云主机控制台,可以在服务器管...

在阿里云 腾讯云上创建MySQL云数据库只需9步

与自建数据库相比,采用云数据库的优势是减少对数据库的运维任务。云数据库支持MySQL、SQLServer、MongoDB等多种数据库类型。下面看看如何设计高可用的云数据库。...

本地搭建简单的Kubernate实验环境并安装数据库

因为dockerhub的限制,这个工作还是有些麻烦的,在这里把过程分享给大家。由于是本地部署并且用于学习和实验,所以使用minikube1.安装docker最新版本的docker方法见链接:...

阿里云服务器安装宝塔面板教程,配置及错误解决方法全攻略

阿里云服务器安装宝塔面板,虽然教程很多,但估计你都看得云里雾里,不太明白,这也是我写这一批文章要解决的问题,将各种问题和配置方法分享,希望能对您有帮助。本文适合想要做网站的站长、技术爱好者,服务器管理...

Aliyun ecs上安装Mysql(yum mysql安装)

安装环境:阿里云ECS+操作系统ubuntu+mysql我这里直接就使用网上安装,输入如下的指令sudoapt-getinstallmysql-server注意:在安装的过程会要输入两次密码,...

阿里云服务器 centos 8 安装MYSQL

1、环境安装yumsearchlibaioyuminstalllibaioyum-yinstallnumactlyuminstalllibnumayuminstallld...

女人要当心 吃越少毛病越多?孕二月的妈咪营养关注?excel2003?

对身体过瘦的人来说,体内脂肪和蛋白质均供应不足,因此头发频繁脱落,发色也逐渐失去光泽。如果过分节食,头发则缺乏充足的营养补给,其中包括缺少铁的摄入,便会枯黄无泽,最后导致大量脱发。体瘦的女性髋骨骨折发...

新一代福克斯RS正式发布搭2.3T动力四驱

新一代福克斯RS正式发布搭2.3T动力四驱来源:经销商供稿日期:2015-02-20全新一代福克斯RS搭载了一台2.3TEcoBoost四缸涡轮增压发动机,并首次配备了拥有多片离合器的四驱系统。日...

两栏布局、左边定宽200px、右边自适应如何实现?

一、两栏布局(左定宽,右自动)1.float+margin即固定宽度元素设置float属性为left,自适应元素设置margin属性,margin-left应>=定宽元素宽度。举例:...

8个前端面试的题目(前端面试题2020及答案 知乎)

一、行内元素有哪些?块级元素有哪些?CSS的盒模型?块级元素:divph1h2h3h4formul行内元素:abbrispaninputselectCss盒模型:内容,bo...

CSS中清除浮动的几种方法,快来学习一下吧

前言首先我们通过一张图来解释下元素浮动是什么样的状态。元素浮动情况上图的html部分代码为:html代码css部分代码为:css代码通过上面的图片可以看出,当内部的div设置float后,外部的元素的...

前端兼容性问题总结(前端常见的兼容性问题)

1.如何在IE6及更早浏览器中定义小高度的容器?IE6及更早浏览器之所以无法直接定义较小高度的容器是因为默认会有行高。解决:#test{overflow:hidden;height:1px;fon...

关于浮动清除的一些小感悟,4种方法清除浮动

如何脱离标准文档流,css中给了三种方法,使一个元素脱离标准文档流。1.浮动。2.绝对定位。3.固定定位。一、什么是浮动呢?定义这样说:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一...

从abc起步学做网站(4)(从abc开始学英语)

现在我们有了个网站index.htm,并且绑定了域名(没有买域名的同学可以继续用空间商送的免费的,一样学),这一篇我们扩充网站index.htm的内容,并且排版。首先说怎么添加图片,在网上随便找个好看...

如何解决div的高自适应问题(css设置div高度自适应)

一、DIV高度自适应(父div高度随子div的高度改变而改变)1、如果父div不定义height、子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改...

取消回复欢迎 发表评论: