使用双伪元素清除浮动原理

2024-08-28

使用before和after双伪元素清除浮动

使用方法: .clearfix:before,.clearfix:after { content:"."; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1; } 优点: 代码更简洁缺点: 由于IE6-7不支持:after,使用 zoom:1触发 hasLayout. 代表网站: 小米.腾讯等

.BFC概念: 块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响. 我们先了解一个名词:BFC(block formatting context),中文为“块级格式化上下文”. 先记住一个原则: 如果一个元素具有BFC,那么内部元素再怎么翻江倒海,翻云覆雨,都不会影响外面的元素.所以,BFC元素是不可能发生margin重叠的,因为margin重叠会影响外面的元素的:BFC元素也可以用来清除浮动带来的影响,因为如果不清除,子元素浮

使用after伪类清除浮动

使用after伪类清除浮动 .department li:after{ content:"."; height:0; visibility:hidden; display:block; clear:both; }

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

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

::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

使用 after 伪类清除浮动

以前清除浮动的时候总是在想要清除浮动的元素后面添加 <div style="clear:both;"></div> 或者写在br标签里面来解决,但这样会增加无语义的标签,下面是用after伪类实现,兼容多种浏览器 .clearfix:after{ content:""; display:block; ; clear:both; visibility:hidden; } 为兼容IE6,IE7,因为ie6,ie7不能用after伪类.加上下面代码

overflow:hidden清除浮动原理

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

CSS给元素清除浮动影响的方法，--最全四种方法

代码实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>清除浮动方法一</title> <style> *{ margin:; padding:; } .father{ width: 500px; background-color: pink; } .son1, .son2{ height

css 添加伪元素消除浮动对父元素高度产生的影响

CSS基础必备盒模型及清除浮动

盒模型盒模型是有两种标准的,一个是标准模型,一个是IE模型. css如何设置两种模型这里用到了CSS3 的属性 box-sizing /* 标准模型 */ box-sizing:content-box; /*IE模型*/ box-sizing:border-box; 行内元素行内元素对margin的支持行内元素不支持margin-top与margin-bottom.块级元素及行内块没有这个问题. 行内元素对padding的支持行内元素设置padding-top会向上延伸一段距离,会覆盖

CSS清除浮动的几种方式

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

css学习_css清除浮动

若元素没有设置宽高,那元素实际宽高是被内容撑起来, 若元素自己有设置宽高,那实际面积于自己的盒子模型有关 1.清除浮动的本质清除浮动主要是为了解决父级元素因为子级浮动而引起的内部高度为0的问题. (当父元素没有设置高度时,子元素又全浮动了,此时子元素脱离文档流而不占据位置,那就会出现父元素高度为0底下的盒子会跑上来.) 2.清除浮动的方法 a.额外标签法(很少用,不想添加下无意义的标签) b.父级添加overflow方法(overflow:hidden) c.利用after伪元素清除浮动注意

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(7)--- 通俗讲解清除浮动

CSS(7)--- 通俗讲解清除浮动上一篇讲了CSS浮动博客地址:CSS(6)---通俗讲解浮动(float) 一.理解清除浮动 1.为什么要清除浮动我们前面说过,浮动本质是用来做一些文字混排效果的,但是被我们拿来做布局用,则会有很多的问题出现. 由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响,为了解决这些问题,此时就需要在该元素中清除浮动. 准确地说,并不是清除浮动,而是清除浮动后造成的影响 2.清除浮动本质清除浮动的本质: 主要为了解决父级元素因为子级浮动引起内

css 关于浮动float的使用以及清除浮动

float:none | left | right 默认值:none 适用于:所有元素 none:设置对象不浮动left:设置对象浮在左边right:设置对象浮在右边当该属性不等于none引起对象浮动时,对象将被视作块对象(block-level),即display属性等于block.也就是说,浮动对象的display特性将被忽略. float在绝对定位和display为none时不会被应用. 什么时候用浮动?--让元素变成一行,水平布局时.需要文本环绕效果时浮动的特点,半脱离文档流,且会对

div 清除浮动的四种方法

概述:为了解决父级元素因为子级内部高度为0的问题 (很多情况不方便给父级元素高,因为不知道有多少内容,让里面的盒子自动撑起高度),清除浮动本质叫闭合浮动更好一些,清除浮动就是把浮动的盒子关到里面,让父盒子闭合出口和入口,不让他们出来影响其他元素. 用法: 选择器 {clear: 属性值} [left | right | both] 一般用both left: 不允许左侧有浮动元素 right: 不允许右侧有浮动元素 both: 同时清除左右两侧浮动的影响方法一.额外标签法在浮动元素末尾添加

CSS——浮动及应用&清除浮动

浮动(float) 1.普通流(normal flow) 这个单词很多人翻译为文档流 , 字面翻译普通流或者标准流都可以. 前面我们说过,网页布局的核心,就是用CSS来摆放盒子位置.如何把盒子摆放到合适的位置? CSS的定位机制有3种:普通流(标准流).浮动和定位. html语言当中另外一个相当重要的概念----------标准流!或者普通流.普通流实际上就是一个网页内标签元素正常从上到下,从左到右排列顺序的意思,比如块级元素会独占一行,行内元素会按顺序依次前后排列:按照这种大前提的布局排

浮动float、浮动影响和清除浮动

普通流(normal flow) 这个单词很多人翻译为文档流 , 字面翻译普通流或者标准流都可以. 前面我们说过,网页布局的核心,就是用CSS来摆放盒子位置.如何把盒子摆放到合适的位置? CSS的定位机制有3种:普通流(标准流).浮动和定位. html语言当中另外一个相当重要的概念----------标准流!或者普通流.普通流实际上就是一个网页内标签元素正常从上到下,从左到右排列顺序的意思,比如块级元素会独占一行,行内元素会按顺序依次前后排列:按照这种大前提的布局排列之下绝对不会出现例外的

浮动、清除浮动、BFC

一. 浮动 1. 浮动的定义使元素脱离文档流,按照向左或向右的方向移动,直到它的外边缘碰到包含它的框或另一个浮动框为止. 脱离文档流就是在页面中不占位置了. 左浮动右浮动此处就不再赘述了. 2. 看一下浮动的一些情况 (1). 只给第二个p浮动时,3不见了,他其实在2的下面,我给3一个宽一点的宽度.会发现3在2的下面. (2). 给3一个浮动他会没有什么变化,因为浮动只会影响他后面的元素,如果上面的元素不浮动,他也不会上去的 (3). 把外边框的div宽度变小,会导致无法容纳所有的浮动元素,

CSS浮动并清除浮动(造成的影响)

一.浮动 CSS浮动 CSS float浮动的深入研究.详解及拓展(一) CSS浮动属性Float详解块级元素独占一行块级元素,在页面中独占一行,自上而下排列,也就是传说中的流. 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为div元素是独占一行的. 注意,以上这些理论,是指标准流中的div.无论多么复杂的布局,其基本出发点均是:“如何在一行显示多个div元素”. 浮动浮动:浮动的框可以左右移动,直至它的外边缘遇到包