after清除浮动的原理

2024-09-01

伪类 :after 清除浮动的原理和方法

浮动元素容器的clearing问题1. 问题的由来有这样一种情形:在一个容器(container)中,有两个浮动的子元素.<div> <div style="float:left;width:45%;"></div> <div style="float:right;width:45%;"></div></div>在浏览器中一运行,就会出现意想不到的结果.实际视图是子元

最近学习css发现了高度塌陷时候要清除浮动,为了理解清楚浮动原理,网上找了不少资料,发现都写的不是很清楚,而且都是一模一样的内容,我在里分享一下我对清楚浮动原理的理解, 如果你已经很了解什么是浮动和浮动的效果你可以直接跳转到三.如何清除浮动(重点)阅读一.什么是浮动首先我们需要知道定位元素在页面中的位置就是定位,解决问题之前我们先来了解下几种定位方式 1.普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式页面中的块级元素:按照从上到下的方式逐个排列

css中：overflow:hidden清除浮动的原理

要想彻底清除浮动的影响,适合的属性不是 clear 而是 overflow. 一般使用 overflow:hidden,利用 BFC 的“结界”特性彻底解决浮动对外部或兄弟元素的影响. 1. 前言: 我们都知道overflow:hidden的字面意思是超出隐藏,说到这个超出隐藏就跟父元素的高度有关了,高度一定了的时候,超出隐藏才有依据. 我们知道当子元素开始浮动了,会脱离文档流,其父元素的高度就会变为0,这个时候页面其他元素就会向上占据位置,就会导致页面混乱. 这个时候我们在父元素设置overf

详解清除浮动的多种方式（clearfix）

说明本文适合知道HTML 与 CSS基础知识的读者,或者想要了解清除浮动背后原理的读者! 1.什么是浮动首先我们需要知道定位元素在页面中的位置就是定位,解决问题之前我们先来了解下几种定位方式 : 1.普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式页面中的块级元素:按照从上到下的方式逐个排列页面中的行内元素:按照从左到右的方式逐个排列但是如何让多个块级元素在一行内显示? 这里就引出了浮动定位 2.浮动定位 float float属性取值为

CSS清除浮动的方法及优缺点

浮动是CSS布局里面用的比较多的属性.浮动的框向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 因为浮动会使当前元素产生向上浮的效果,所以浮动的元素会脱离正常的文档流,它包围的内容在文档流中不占空间.元素浮动会影响其他元素的布局,那么浮动会带来哪些影响呢? 1. 元素浮动后,父元素的背景不能显示: 2. 父元素边框不能被撑开,即父元素高度塌陷(因为父元素的高消失,当元素没有高度时就会有塌陷): 3. margin 设置值不能正确显示: 4. 兄弟元素的位置受到影响: 注:如果浮

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清除浮动8大方法

CSS清除浮动是每一位web前端工程师都要掌握的技术,也是让每一位刚入门的前端工程师感到头疼的问题, 下面就来讲一下CSS清除浮动的原理和各种解决方法,大家可以根据实际情况选择最佳的解决方案. 在用DIV+CSS布局时通常都会用到浮动(float)来完成页面布局,浮动(float)会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.如果在布局中使用了浮动(float)而未进行合理的清除浮动,就会使页面产生错误. 这时就需要用到清除浮动的方法来解决

为什么overflow:hidden能达到清除浮动的目的？

1. 什么是浮动 <精通CSS>(第3版)关于浮动的描述: 浮动盒子可以向左或向右移动,直到其外边沿接触包含块的外边沿,或接触另一个浮动盒子的外边沿. 浮动盒子也会脱离常规文档流,因此常规流中的其他块级盒子的表现,几乎当浮动盒子根本不存在一样. 为什么说"几乎"?因为其他元素盒子中的文本内容会记住浮动元素的大小,并在排布时避开它,为其留出相应的空间.从技术角度来讲,就是跟在浮动元素后面的行盒子会缩短,从而为浮动元素留空,造成文本环绕浮动盒子的效果.事实上,浮动就是为了在网页

css中clearfix清除浮动的用法及其原理示例介绍

clearfix的定义: .clearfix:after {}{ content: "."; /**//*内容为“.”就是一个英文的句号而已.也可以不写.*/ display: block; /**//*加入的这个元素转换为块级元素.*/ clear: both; /**//*清除左右两边浮动.*/ visibility: hidden; /**//*可见度设为隐藏.注意它和display:none;是有区别的.visibility:hidden;仍然占据空间,只是看不到而已:*/ l

overflow:hidden清除浮动原理解析及清除浮动常用方法总结

最近在看<CSS Mastery>这本书,里面有用overflow:hidden来清理浮动的方法.但是一直想不明白为什么能够实现清除浮动,查阅了网络上的解释,下面来总结一下. 一.首先来想想我们大家理解的overflow:hidden是超出该元素的部分进行隐藏.这个时候就需要明确一点,该元素的高度是怎么定义的.当一个div中的两个元素浮动之后,此时div的高度就会塌陷,此时div的高度为0.那是不是意味着就要将浮动元素隐藏起来,如果是真的隐藏就是反布局常识的.所以这中间肯定有我们现在还不知道

overflow:hidden清除浮动原理

overflow:hidden的意思是超出部分去掉,如果父元素height为auto,内部元素浮动,势必会将内部元素全部隐藏,故计算出内部浮动高度顺便清除浮动.

::after::before清除浮动原理

先来看一段代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> h1{ float:left; width:200px; height:200px; background-color:#ccc; } span{ display:block; c

css清除浮动各方法与原理

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

[html/css]清除浮动的相关技巧

以前只了解得很浅显,转载了一篇不错的文,学习参考浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了.解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问题. 下面总结8种清除浮动的方法(测试已通过 ie chrome firefox opera,后面三种方法只做了解就可以了): 1,父级div定义 height <style type="text/

CSS清除浮动float方法总结

使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1">1</div> <div class="d2">2</div> </div> .box{ border: 1px solid black: margin: 50px auto; padding: 50px; color: #fff; }

CSS中清除浮动的两种方式

在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div class="father"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3"&g

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

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

CSS清除浮动

今天看到一篇文章关于清除浮动的,突然间脑袋短路了,咦?为什么要清除浮动?原谅我的无知,搜了下原来是这样,又倒腾出原来的笔记,唉,本来就有记录啊,而且也会经常用到,用的久了连原理都忘了.恩,防止自己再犯同样的错误,我还是自己总结整理出来吧!话不多说,代码为证! <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>为什么要清除浮动</title> &l

CSS清除浮动八种方法

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

css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？一起来$('.float')

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