css清除浮动的原理

最近学习css发现了高度塌陷时候要清除浮动,为了理解清楚浮动原理,网上找了不少资料,发现都写的不是很清楚,而且都是一模一样的内容,我在里分享一下我对清楚浮动原理的理解,

如果你已经很了解什么是浮动浮动的效果你可以直接跳转到三.如何清除浮动(重点)阅读

一.什么是浮动
首先我们需要知道定位 
元素在页面中的位置就是定位,解决问题之前我们先来了解下几种定位方式 
1、普通流定位 static(默认方式) 
  普通流定位,又称为文档流定位,是页面元素的默认定位方式 
  页面中的块级元素:按照从上到下的方式逐个排列 
  页面中的行内元素:按照从左到右的方式逐个排列 
  但是如何让多个块级元素在一行内显示? 
  这里就引出了浮动定位 
2、浮动定位 float 
  float属性 取值为 left/right 
  这个属性原本不是用来布局的,而是用来做文字环绕的,但是后来人们发现做布局也不错,就一直这么用了,甚至有些时候都忘了用他做文字环绕 
3、相对定位 relative 
  元素会相对于它原来的位置偏移某个距离,改变元素位置后,元素原本的空间依然会被保留 
  属性:position 
  取值:relative 
  配合着 偏移属性(top/right/bottom/left)实现位置的改变
4、绝对定位 absolute 
如果元素被设置为绝对定位的话,将具备以下几个特征 
  1、脱离文档流-不占据页面空间 
  2、通过偏移属性固定元素位置 
  3、相对于 最近的已定位的祖先元素实现位置固定 
  4、如果没有已定位祖先元素,那么就相对于最初的包含块(body,html)去实现位置的固定 
  属性:position 
  取值:absolute 
  配合着 偏移属性(top/right/bottom/left)实现位置的固定
5、固定定位 fixed 
  将元素固定在页面的某个位置处,不会随着滚动条而发生位置移动 
  属性:position 
  取值:fixed 
  配合着 偏移属性(top/right/bottom/left)实现位置的固定

二.浮动的效果
  浮动 之后会怎么样? 
  1、浮动定位元素会被排除在文档流之外-脱离文档流(不占据页面空间),其余的元素要上前补位 
  2、浮动元素会停靠在父元素的左边或右边,或停靠在其他已浮动元素的边缘上(元素只能在当前所在行浮动) 
  3、浮动元素依然位于父元素之内 
  4、浮动元素处理的问题-解决多个块级元素在一行内显示的问题 
注意 
  1、一行内,显示不下所有的已浮动元素时,最后一个将换行 
  2、元素一旦浮动起来之后,那么宽度将变成自适应(宽度由内容决定) 
  3、元素一旦浮动起来之后,那么就将变成块级元素,尤其对行内元素,影响最大 
  块级元素:允许修改尺寸 
  行内元素:不允许修改尺寸 
4、文本,行内元素,行内块元素时采用环绕的方式来排列的,是不会被浮动元素压在底下的,会巧妙的避开浮动元素
  浮动 之后会有什么样的影响? 
  由于浮动元素会脱离文档流,所以导致不占据页面空间,所以会对父元素高度带来一定影响。如果一个元素中包含的元素全部是浮动元素,那么该元素高度将变成0(高度塌陷)

三.如何清除浮动(重点)
解决方案 及 原理分析

网上有很多种方法,我这里只介绍一种非常好用的方法,设置class名为clearfix

原理:如果子元素全部浮动,父元素就会塌陷,所以在所有浮动子元素后添加一个没有浮动元素把父元素撑起来,这个元素找不到、不占据空间,不能让它里面有内容,有内容也要隐藏

.clearfix:after{
content:‘.‘;
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.clearfix:after{zoom:1;}
/*解决IE的问题*///visibility:hidden;隐藏元素,但是位置留着//display:none;隐藏元素,不占据空间,彻底隐藏//after:伪对象选择符

  

原文地址:https://www.cnblogs.com/KevinMO/p/10961600.html

时间: 2024-11-09 00:51:54

css清除浮动的原理的相关文章

css清除浮动各方法与原理

说到清除浮动的方法,我想网络上应该有不下7,8的方法,介绍这些方法之前,想下为什么清除浮动? 再次回到float这个属性,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列. 这就产生了一个问题:浮动元素所在父元素不会自动伸长以便闭合浮动元素,任其“红杏出墙”,这显然不符合我们的“伦理观”,所以要“抓回来”施以家法:那么如何抓呢? 提起css,提起(x)html,首先进入脑海的是楚楚动人的页面吗?不,首先应该是这楚楚动人的页面的背后的“楚楚冻人

css清除浮动的方法总结

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

css清除浮动clearfix:after的用法详解

如果外部有一个div容器,其内部div容器设置了float样式,则外部的容器div因为内部没有clear,导致不能撑开.解决方法:  CSS代码: 复制代码 代码如下: .clearfix:after { content: "." ; display: block ;height: 0 ;clear: both ;visibility: hidden ;}.clearfix{ display: inline-block; }/* Hides from IE-mac */ *html .

css 清除浮动的各种方法

1.为什么要清除浮动 在网页中,DIV一般都是嵌套的,外面称为窗口,里面的DIV存放内容,如果不浮动的话,如下面这段代码<div style=”background:#ccc;”> <div style=”float:left; width:30%; height:40px;background:#333; “> Content here</div> </div>本来我们期望看到的是,外面背景为#ccc的层包含了里面背景为#333的层,但实际上,外面的层在显

css清除浮动float的三种方法总结【转载自https://my.oschina.net/leipeng/blog/221125】

摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer">     <div class="div1">1</div>     <div class="div2">2</div>     <div class="div3

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

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

css清除浮动代码实例演示

css清除浮动代码实例演示:在页面中如果采用了浮动,那么清除浮动则是必须要进行的操作,否则可能引起一些意想不到的后果.本章节不会对浮动或者清除浮动的原理做介绍,只是分享一下清除浮动的几段代码,因为有些朋友可能需要的就是一个代码实例,关于浮动或者清除清除浮动的相关内容可以参阅相关阅读.一.使用overflow清除浮动: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <met

css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$(&#39;.float&#39;)

一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer">     <div class="div1">1</div>     <div class="div2">2</div>     <div class="div3">3</div> </div> 分析CSS代码样

css清除浮动float的三种方法总结

转载地址:https://my.oschina.net/leipeng/blog/221125 css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"> <div class="div1">1</div> <div class="div2">2</