浮动清除、before&after

Unit 6.标准文档流,浮动,清除浮动以及margin塌陷问题

一. 什么是标准文档流文本流其实就是文档的读取和输出顺序,也就是我们通常看到的由左到右.由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个属性可以将元素从文本流脱离出来显示. 标准文档流的围观现象有3种: 1.空白折叠现象:多个空格或者换行会被折叠成一个. 2.高矮不齐,底边对齐. 3.自动换行,一行写不完,自动换行. <!DOCTYPE html> <html lang="en"> <head…

浮动清除、before&after

::before 和 ::after属于伪元素,而 :before 和 :after属于伪类(CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号)因此如果使用了 display 或者 width 等属性时使得显示脱离了原本元素后,建议按照标准双写.过于老的浏览器可能会存在支持问题,不过伪元素大多是配合 CSS3 使用,就无所谓向下兼容了这两个伪类下特有的属性 content ,用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容.注意这些添加不会改变文档内容,不会出现在 DOM 中,不可复…

CSS中的浮动清除

先来看一个实验:现在有两个div,div身上没有任何属性.每个div中都有li,这些li都是浮动的. 理想的效果:可实际的效果: 这个地方就涉及到浮动,因为两个父元素div都没有高度(或者小于子元素的高度),所以不能给浮动的孩子一个容器,所以后边的li还拼命的往上面的最后一个li靠近. 清除浮动就是要给父元素加一个大于等于子元素高度的高度. 1.清除浮动:给父元素一个高度,让其子元素在父元素中浮动.只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮动元素. 2.清除浮动:在工作中,大部…

[css]浮动-清除浮动的3种方法

清除浮动的方法: 内墙法注: 这是个奇淫技巧,没什么原理可言,记住即可这个技巧又使得父box重新可以被子box撑开高度了. 隔墙法-适用于2个box之间上下排列由于2个box高度依旧是0, 彼此之间的margin还是不生效. 可以用墙来撑开 .cl { clear: both; } .h16 { height: 16px; } <div class="box1"> <ul> <li>HTML</li> <li>CSS&l…

横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法

最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先:一.并排在一行的两个div样式有这种情况:ie或者ff下对于子div设置float左的时候,如果另外的子div没有设置float左的话,两个浏览器下会有区别,具体有一个会产生间隙.兼容做法就是都设置float属性.但是记住有设置过float就要将float clear掉,不然下面的div会叠在已float的div上.我通常把清除浮动写成单独的<div clas…

【css学习整理】浮动,清除

css内边距属性: padding padding-top right bottom left 如果是两个数字,指的是上下,左右 padding: 10px 20px 上下10 左右20 如果是三个数字,指的是上,左右,下 padding: 10px 20px 30px 上10 左右20 下30 css外边距属性:margin 两个数字: 上下左右三个数字: 上左右下居中: 0 auto css背景: background background-color: 背景色 bac…

css基础（浮动清除f浮动）

文档流(标准流) 1.元素自上而下,自左而右 2.块元素,独占一行,行内元素在一行上显示,碰到父级元素的边框换行浮动left 浮动的框可以向左或是向右移动,直到它的边缘碰到包含框或是另个浮动框的边框为止特点设置了浮动的元素不占原来的位置(不在标准流) 可以让块级元素在一行显示浮动可以行内元素为行内块元素注意:转化过程尽可能用display转化浮动的用途文本绕图 <head> <meta charset="UTF-8"> <tit…

从问题找原因之CSS浮动清除

问题描述浮动元素导致的后面img标签居中对齐"失败",如下图 <div> <div class="content1"> <div class="float-left">left-div</div> <div class="float-right">right-div</div> </div> <div class="conte…

CSS清除浮动技巧

一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了float浮动,所以两个黑色盒子产生了浮动,导致红色盒子不能撑开,这样浮动就产生了. 简单地说,浮动是因为使用了float:left或float:right或两者都是有了而产生的浮动. 二.浮动产生负作用 1.背景不能显示由于浮动产生,如果对父级设置了(CSS background背景)CSS背景颜色…

【转】CSS清除浮动_清除float浮动

CSS清除浮动方法集合一.浮动产生原因一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了float浮动,所以两个黑色盒子产生了浮动,导致红色盒子不能撑开,这样浮动就产生了. 简单地说,浮动是因为使用了float:left或float:right或两者都是有了而产生的浮动. 二.浮动产生负作用 1.背景不能显示由于浮动产生,如…

CSS清除浮动_清除float浮动

2.clear:both清除浮动为了统一样式,我们新建一个样式选择器CSS命名为“.clear”,并且对应选择器样式为“clear:both”,然后我们在父级“</div>”结束前加此div引入“class="clear"”样式.这样即可清除浮动. 具体CSS代码: .divcss5{ width:400px;border:1px solid #F00;background:#FF0} .divcss5-left,.divcss5-right{width:180px;hei…

css浮动布局，浮动原理，清除(闭合)浮动方法

css浮动 1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的原理:使当前元素脱离普通流,相当于浮动起来一样,浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘 3.浮动的生成:使用css属性float:left/right/none 左浮动/右浮动/不浮动(默认) 4.浮动的影响: 不会影响未浮动的块级元素布局,但是会影响内联元素的布局浮动后的元素可以设置宽度和高度,…

浮动（float）与清除浮动（clear）

上一篇中我们了解了块级元素与内联元素,今天将自己查阅的资料整理写出来,与大家一起理解什么是浮动,以及怎样清除浮动,本文以div元素为例. 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.所以浮动也有left.right.none三种.浮动元素是脱离文档流的,漂浮在文档流之上,和文档流不是一个层次. HTML 文件就像是一个方形的水槽,它在浏览器中加载的过程就好比是向水槽中放水,而这些水就代表的是页面中的各个元素,他们都是有顺序的进入水槽(文档流的顺序和我们写字一样…

CSS清除浮动的几种方式

浮动对页面的影响: 如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0.由于父盒子的高度为0, 下面的元素会自动补位,所以这个时候要进行浮动的清除(不要在浮动元素上清除浮动),不然浮动会造成父元素高度坍塌,同时浮动会脱离文档流,对整个页面布局有很大的影响方式一:使用overflow属性来清除浮动 .ovh{ overflow:hidden; } 先找到浮动盒子的父元素,再在父元素中添加一个属性:overflow:hidden,就是清除这个父…

css清除浮动的3种方式

前言: 当不给父元素设置宽高时,父元素的宽高会被子元素的内容撑开.但当子元素设置浮动属性(float) 后, 子元素会溢出到父元素外,父元素的宽高也不会被撑开,这称之为“高度塌陷”.可以理解为使用浮动后的副作用那什么是高度塌陷呢?比如下面截图,box1和box2的外层(这里外层指下图箭头所指的紫色部分) 本来应该像下面截图一样,外层包裹住box1和box2,但因为设置浮动导致父元素高度塌陷,所以出现了上图的情况 3种浮动清除方法以前我喜欢固定用一种方式来清除浮动,其实方法不止一种,…

web前端（10）—— 浮动，清除默认样式

文档流 web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”,就跟编程语言一样,都是由上而下而设计软件 ,想往哪里画东西,就去哪里画文档流带来的最明显的现象就是一行写不完换行写自动换行,一行写不满,换行写如果在一行内写文字,文字过多,那么浏览器会自动换行去显示我们的文字文档流还有其他现象底部对齐,高矮不管文字还有图片大小不一,都会让我们页面的元素出现高矮不齐的现象,但是在浏览器查看我们的页面总会发现底边对齐例: <!DOCTYPE h…

CSS之清除浮动(span/clearfix)

一.问题描述 web网页设计中,在div元素中有时候常伴有图文结合的post组件.为了使得文本在图像周围环绕,那么需要对图像区域使用float浮动.如果不做清除浮动,则会出现如下结果: 图像比文本高,且图像脱离并超出了父级元素的文档流. 源码: <!DOCTYPE html> <html> <head> <title>float demo span(block;clear;height)</title> </style> </h…

CSS之浮动布局（float，浮动原理，清除/闭合浮动方法）

css之浮动布局本人博客:查看文章 1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的原理:使当前元素脱离普通流,相当于浮动起来一样,浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘 3.浮动的生成:使用css属性float:left/right/none 左浮动/右浮动/不浮动(默认) 4.浮动的影响: 对附近的元素布局造成改变,使得布局混乱浮动后的元素可以设…

浅谈css中浮动和清除浮动带来的影响

有很多时候,我们都会用到浮动,而我们有时候对浮动只是一知半解,却不是太清楚它到底是怎么回事,不知道各位有没有和我一样的感觉,只知道用它,却不知道它到底是怎么回事,所以,在学习的过程中,就要把一个概念不是很清晰的问题把它弄清楚了,便于我们以后的使用.早些时候,W3C规定出来的浮动实际并不是为了布局所用,当时是为了做文字环绕才使用到浮动,后来有人发现用它来做布局也挺不错啊,但是,用到了浮动,是要付出一定的代价的,我们就必须要处理浮动所带来的影响.接下来我们就聊聊浮动的那些事儿,此分享仅供参考,有什么…

css 三（清除浮动专题）

1. 三个关于浮动的概念不浮动float:none; 清除周围的浮动元素 float:both 这是清除浮动的本意清除子元素浮动对父元素的影响 clearfix 很多人都理解成这个叫清除浮动.. 2. 什么是清除浮动清除浮动不是把当前标签的浮动给清除了,如果这样,还加浮动做什么其实清除浮动指的是清楚当前元素旁边的浮动元素,但是当前元素又不能影响别人,打不赢就跑,所以自己就跑到下面去了. 3. 为什么要清楚浮动在布局的时候我们经常希望某些内容能够水平排布,水平排布后,…

css 盒模型文档流几种清除浮动的方法

盒模型 1.box-sizing: content-box 是普通的默认的一种盒子表现模式盒子大小为 width + padding + border content-box:此值为其默认值,其让元素维持W3C的标准Box Mode 2.box-sizing:border-box 以盒子边框为界自己管理里面的元素 border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的盒子阴影 box-shadow:水平阴影垂直阴影模糊距…

CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性

最近刚好碰到这个问题,看完这个就明白了.写的很好,所以转载了! CSS清除浮动_清除float浮动 CSS清除浮动方法集合一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了float浮动,所以两个黑色盒子产生了浮动,导致红色盒子不能撑开,这样浮动就产生了. 简单地说,浮动是因为使用了flo…

CSS清除浮动方法集合

CSS清除浮动方法集合一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了float浮动,所以两个黑色盒子产生了浮动,导致红色盒子不能撑开,这样浮动就产生了. 简单地说,浮动是因为使用了float:left或float:right或两者都是有了而产生的浮动. 二.浮动产生负作用 - …

css浮动现象及清除浮动的方法

css浮动现象及清除浮动的方法首先先明确浮动最初的定义及使用场景:实现文本环绕图片的效果. 除了用浮动外,目前暂无其他方法实现文本环绕再来看看浮动的具体定义: 浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘.浮动框不属于文档中的普通流,属于浮动布局. (CSS三种基本的定位机制:普通流.浮动和绝对定位) 当一个元素浮动之后,不会影响到块级框的布局而只会影响内联框(通常是文本)的排列,文档中的普通流就会表现得和浮动框不存在一样,当浮动框高度超出包含框的时候,也就会…

边框，元素居中，盒子模型，margin,display,overflow,textarea,float,浮动停止条件，清除浮动影响，margin-top的bug，清除默认样式

边框 solid实线 dotted虚线 dashed点线盒子在页面中实际的宽高都是5部分组成宽=borderleft+paddingleft+width+paddingright+borderright 在块元素中宽度auto 适配到父元素,占满高度auto 由内容撑开在文本或者行元素居中在他的块父元素上加text-align:center; padding不能加负值行元素没有上下外间距盒子模型内容content padding border margin margin外间距块…

html-css:浮动_清除浮动

1.浮动清除浮动之前我们首先需要了解为什么要清除浮动 1. 假设我们有一个父盒子,不设置高度,其高度有内部子盒子的大小自动撑开,这样是完全可行的,因为有时候我们并不想直接固定死父盒子的大小,而是根据子盒子的大小变化 2. 但是有一个问题: 如果我们给子盒子加了浮动,加了浮动的盒子脱离了标准流,而父盒子还是属于标准流,而且父盒子没有设置高度,就导致父盒子的上下边框合并在一起变成一条线 2. 清除浮动 1. 额外标签法(添加额外标签,语义化差) 在最后一个浮动的子元素的后面添加一个标签,标签的样式…

CSS浮动、定位

这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行,并在每行中按从左到右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. 让元素脱离文档流的方法有:浮动和定位. 二.有几种定位方式,分别是如何实现定位的,使用场景如何? CSS定位方式有四种:默认定位(static).相对定位(r…