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

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

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

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

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

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

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

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

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

三、清除浮动的方法。

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

.

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

3.隔墙法。就是在两个部分之间加一个<div>,设置一个高度。还有就是“内墙发”:就是在块里边在放一个<div>,设置高度,不仅不让后边的去追前边的,并且能给外边的<div>撑出一个高度。

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

外墙法:

     

内墙法:

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

    

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

时间: 2024-10-18 22:43:52

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

【总结】清除webbrowser cookie/session的6种方法

下面是我测试下来的6种清除webbrowser中cookie的6种方法: //方法一:调用 wininet.dll清除cookie (推荐) SuppressWininetBehavior(); //方法二:删除用户登录后的信息,这里相当于浏览器的注销功能,使用的是ie自带的功能 (推荐) HtmlDocument document = wb.Document; document.ExecCommand("ClearAuthenticationCache", false, null);

清除webbrowser cookie/session的6种方法

下面是我测试下来的6种清除webbrowser中cookie的6种方法: //方法一:调用 wininet.dll清除cookie (推荐) SuppressWininetBehavior(); //方法二:删除用户登录后的信息,这里相当于浏览器的注销功能,使用的是ie自带的功能 (推荐) HtmlDocument document = wb.Document; document.ExecCommand("ClearAuthenticationCache", false, null);

清除盒子内子元素浮动导致父元素塌陷的5种方法

更详细的解释请移动到: 地址1:http://www.cnblogs.com/chedabang/p/5973601.html 地址2:https://www.cnblogs.com/libin-1/p/5975367.html 盒子塌陷是什么? 何为盒子塌陷,盒子塌陷是由于子元素浮动导致的子元素脱离标准文档流,父元素无法获取子元素的高度而出现的一种现象. 盒子塌陷(如下): 盒子未塌陷(如下):   HTML/CSS代码 .... // css .box-wrapper { border: 5

积跬步,聚小流-------几种方法实现分割线

其实这个问题想了实现了有一段时间了,只是单纯自己想了个办法简单实现了效果,没想出太多办法来,最关键的是,我也不知道这原来是叫"分割线",只知道是什么样,连搜都不着知道怎么搜,赶巧今天碰到了,就学习了下,先来描绘下要实现的"分割线"效果. 对,就是这个效果,记住了,这叫"分割线"... 最开始反应过来的是层叠起来实现效果,也是之前一直在用的方法 <hr width="80%"/> <div style=&quo

找出最大值和最小值的时间复杂度比较小的一种方法

       一般认为,对于给定的n个数,只要独立地找出最小值和最大值,各用n-1次比较,最多2(n-1)次就可以找出最大值和最小值.        实际上,至多3(n/2)次比较就足以同时找到最大值和最小值,具体做法是:成对的处理元素,先将一对元素互相比较,然后将最小者与当前最小值比较,将较大者与当前最大值比较,因此每两个元素需要3次比较.这里要注意n的奇偶,当n是奇数,就将最小值和最大值都设置为第一个元素,然后成对的处理剩下的元素:如果n是偶数,就对前两个元素做一次比较,以决定最大值和最小值

清除浮动的八种方法

清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了.解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问题. 下面总结8种清除浮动的方法(测试已通过 ie chrome firefox opera,后面三种方法只做了解就可以了): 1,父级div定义 height 复制代码

CSS清除浮动大全共8种方法

清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了.解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问题. 下面总结8种清除浮动的方法(测试已通过 ie chrome firefox opera,后面三种方法只做了解就可以了): 1,父级div定义 height 代码如下

(转)CSS清除浮动大全共8种方法

清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了.解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问题. 下面总结8种清除浮动的方法(测试已通过 ie chrome firefox opera,后面三种方法只做了解就可以了): 1,父级div定义 height 复制代码

CSS 清除浮动的4种方法

此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景.<style type=”text/css”> <!– *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{flo