【css浮动导致的高度塌陷问题及清楚浮动的方法】的更多相关文章

css浮动导致的高度塌陷问题及清楚浮动的方法

浮动很好用,但是用浮动后,当浮动元素的父级元素没有高度时,就会造成高度塌陷,从而影响布局.下面就从一开接触前端时,渐渐发现解决高度塌陷的问题的方式. 一.给浮动元素的父级元素添加固定的高度css[height:200px]    很多时候就是不想把如下布局中的父极元素的高度定死,讲究的是自适应,从而才出现了高度塌陷的问题,因此,该方法一般都不适用. 二.给浮动元素的父级元素添加样式css[overflow:hidden/overflow:auto]---- 是将父级元素形成一个BFC区(独立的布…

浮动引发的高度塌陷问题及其解决方法(BFC相关概念及性质)

浮动引发的高度塌陷问题 高度塌陷问题的产生 BFC(Block Formatting Context)的引入 元素开启BFC后的特点 开启BFC的元素不会被其他浮动元素所覆盖 开启BFC的元素不会发生父子元素外边距重叠 开启BFC后可以包含浮动的子元素 如何开启BFC 设置元素浮动 将元素display属性设置为inline-block.table等 overflow属性设置为非visible值 开启定位 高度塌陷解决方法1: 父元素高度写死 高度塌陷解决方法2: 为父元素也设置浮动 高度塌陷解…

css float父元素高度塌陷

css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题 以下几个方法可以解决float 父元素高度消失/塌陷的问题 .clearfix:after{content:'';display:block;height:0;overflow:hidden;clear:both;} .clearfix {*zoom:1} 更好的方法是 .clearfix:after{content:'';dis…

CSS浮动布局带来的高度塌陷以及其解决办法

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .outer{ 8 border:10px red solid; 9 } 10 .inner{ 11 width:100px; 12 height:100px; 13 backgrou…

浅谈BFC与高度塌陷

这个概念我大概是去年时候接触到的吧,略略记录了一下,没有深入研究,恰逢最近秋招,在这里写一写,顺便加深自己的印象. 什么是BFC? 页面中的元素都隐含一个属性Block Formatting Context(块级格式化上下文) 简称BFC. BFC有什么用?如何开启BFC?开启BFC后会发生什么? 在这里我们先看看几个小情境.并且抛出几个另外的问题 (1) <div class="div1"> <div class="div2">div2&l…

高度塌陷与BFC

高度塌陷的产生条件 子元素浮动,脱离文档流 子元素绝对定位或固定定位,脱离文档流 定位产生的高度塌陷只能通过加固定高度或更换其他方案解决塌陷,本文主要讨论浮动产生塌陷的解决方法. 高度塌陷的解决方法 1.直接给父元素加高度 div{ border: 5px solid black; height: 200px; } p{ width: 200px; height: 200px; background-color: aqua; float: left; } 优点:代码简单,容易理解 缺点:自适应性…

CSS笔记 - fgm练习 2-10 - 提示框效果 （清除子元素浮动高度塌陷的影响）

CSS清除浮动方法参考: https://blog.csdn.net/promiseCao/article/details/52771856 <style> *{ margin: 0; padding: 0; list-style: none; font-size: 12px; } .outer{ width: 560px; margin: 10px auto; border: 1px solid #000; padding: 10px 0 0 10px; } .outer>h2{ te…

css关于浮动的高度塌陷

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BFC</title> <style type="text/css"> .div1 {background-color: #FCE38A; width: 200px; height: 100px;} .div2 {backgr…

如何解决浮动元素高度塌陷---CSS

解决高度塌陷问题的方法: 方法一. //给父元素添加声明 overflow:hidden; 缺点:回隐藏溢出的元素: 方法二. 在浮动的元素下添加空div标签,并给该元素添加声明: clear:both; height:0; overflow:hidden; 缺点:在结构里增加了空标签,不利于代码可读性,且降低了浏览器性能: 方法三. 万能清除浮动法: 选择符: .clear:after{ content: ' ', clear: both; display:block; height:0; v…

CSS: inline-block的应用和float块高度塌陷

普通流高度塌陷: 当块float浮动时,不会对块布局产生影响,块仍然会按照左右或者上下的顺序排列.但是会影响文档的排列,当文档的高度超过块的高度时,块的高度会产生塌陷现象.   高度塌陷解决方法:   闭合浮动: 1.在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”> 2.<br clear="all" />原理类似上面 3.父元素设置 overflow:hidden; 在IE6中需要出发hasLayout,例如zoom:1.缺…

css之高度塌陷及其解决方法

浅谈 清除浮动 的多种方式(clearfix) 1.什么是浮动 ? 是否脱离文档流? 1.普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式 页面中的块级元素:按照从上到下的方式逐个排列 页面中的行内元素:按照从左到右的方式逐个排列 但是如何让多个块级元素在一行内显示? 这里就引出了浮动定位 2.浮动定位 float float属性 取值为 left/right 脱离文档流 3.相对定位 relative 元素会相对于它原来的位置偏移某个距离,改变元素位…

CSS高度塌陷问题解决方案

高度塌陷的存在:原因分析 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box1{ /*为box1设置一个边框*/ border: 10px red solid; } .box2{ width: 100px; height: 100px…

CSS高度塌陷

问题描述:当父元素只包含浮动的元素的时候,且父元素没有设置高度,如果父元素设置了边框border,那么看起来子元素不在父元素之内. 比如这样: html: <div id="parent"> <div class="left"></div> <div class="right"></div> </div> CSS: div { border: 2px solid #000;…

CSS高度塌陷问题与解决办法

问题描述: 在文档流中,父元素默认被子元素撑开(父多高子多高),一旦子浮动,脱离文档流,父无撑起元素便塌陷,父下的所有元素会上移. (不推荐)可以将父高度写死避免塌陷,但高度写死后,父高度不能自动适应子高度的变化. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>高度塌陷问题</title> <style type="tex…

子元素浮动父容器高度不能自适应的CSS解决方法

百度标题:子元素浮动父容器高度不能自适应的CSS解决方法 从第二份工作开始,已经不怎么写样式了,然后就忘记了一部分,有的也生疏了. 今天碰到子元素意外挤到一起的问题,就问公司前端工程师是怎么回事,F12查看发现,是因为子元素浮动了导致的,然后在父级元素加了clear:both好了. 所以查询了一下,浮动导致的问题.…

CSS设置浮动导致背景颜色设置无效的解决方法

float浮动会使父元素高度塌陷,父级元素不能被撑开,所以导致背景颜色不能被撑开 解决方法: 对父元素设置高度 对父元素设置 overflow:hidden清除浮动 把父元素也设置为float浮动 结束标签前加代码:<div style="clear:both"></div>…

float浮动导致父元素高度坍塌的原因及清除浮动方法

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

浮动和包含框的关系，伪元素after解决高度塌陷

浮动会使元素尽量向左或向右移动,直到碰到包含框或另外一个浮动元素的盒子模型的边缘 包含框并不会改变里面浮动元素的宽高,浮动元素宽高不会限制在包含块以内 <!DOCTYPE html> <html> <head> <style type="text/css"> * { margin:0; padding:0; } .container { width:110px; height:100px; border:1px solid blue; }…

float浮动造成高度塌陷的解决办法

Float是我们在页面布局中常用的,也是非常重要的一个属性,可以让页面布局变得更加灵活. 但是在继续学习之后,尤其是掌握了宽高自适应之后,我们常常会发现一个奇怪的现象:如果父元素没有设置高度,而子元素都浮动了的话,父元素就“瘪”了. 就像下面这样 <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css">…

CSS 控制Html页面高度导致抖动问题的原因

CSS 控制Html页面高度导致抖动,这类由高度导致页面抖动的问题,其实究其根本原因是滚动条是否显示导致的 在CSS中添加如下代码: html,body{ overflow-y:scroll;} html,body{ overflow:scroll; min-height:101%;} html{ overflow:-moz-scrollbars-vertical;} 已经试验过了,是可以执行的.由此可以得出结论:这类由高度导致页面抖动的问题,其实究其根本原因是滚动条是否显示导致的.…

后端码农谈前端（CSS篇）第七课：定位与浮动

一.定位: 1.定位的理解 (1)相对定位 相对定位是一个非常容易掌握的概念.如果对一个元素进行相对定位,它将出现在它所在的位置上.然后,可以通过设置垂直或水平位置,让这个元素"相对于"它的起点进行移动. 如果将 top 设置为 20px,那么框将在原位置顶部下面 20 像素的地方.如果 left 设置为 30 像素,那么会在元素左边创建 30 像素的空间,也就是将元素向右移动. #box_relative { position: relative; left: 30px; top:…

li浮动引起ul高度坍陷的解决方法

我们都知道float在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”.元素浮动之后,它脱离当前正常的文档流,所以无法撑开其父元素,造成父元素的高度塌陷.如下的代码就是li向左浮动后,ul高度坍陷,所以border就显示为一条线.代码.效果如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <tit…

html高度塌陷以及定位的理解

高度塌陷的含义: 父元素的高度,默认被子元素撑开,目前来讲box2多高,box1就多高.此时如果子元素设置浮动,则会导致其完全脱离文档流,子元素脱离文档流将无法撑开父元素, 导致父元素的高度丢失,就是我们说的高度塌陷问题.父元素一旦高度塌陷,则它下边的元素会向上移动, 导致整个页面的布局混乱 . 定位(position): 定位一共有4种:relative,absolute,fixed,static relative:相对定位就是在自己原先的位置上进行定位,没有脱离文档流,还占着原先的位置,比如…

__x__(29)0908第五天__高度塌陷 问题

高度塌陷 在文档流中,父元素的高度默认是被子元素撑开的. 但是当为 子元素 设置 float 时,子元素会完全脱离文档流,无法再撑开父元素,导致父元素高度塌陷...以致于布局混乱 变成 BFC块级格式化环境 根据 W3C 标准,元素都有一个隐含的属性 “Block Formatting Context” 该属性可以 打开/关闭,默认是“关闭”. 当开启BFC后,元素将具有如下特性: 1. 父元素的垂直外边距不会和子元素重叠. 2. 不会被浮动元素所覆盖,会在浮动元素的旁边显示. 3. 可以包含浮…

html高度塌陷问题解决

高度塌陷的问题: 当开启元素的BFC以后,元素将会有如下的特性 1 父元素的垂直外边距不会和子元素重叠    开启BFC的元素不会被浮动元素所覆盖    开启BFC的元素可以包含浮动的子元素 如何开启元素的BFC 设置元素浮动    设置元素绝对定位    设置元素为inline-block float:left; (不好)  虽然可以撑开父元素 会导致父元素宽度丢失了 而且使用这种方式导致下边的元素上移. display:inlink-block; 布局好了,但是宽度又没有了.但是会导致宽度丢…

父标签浮动（float）“塌陷”问题

浮动“塌陷” float参见: http://www.cnblogs.com/bigtreei/p/8110090.html http://www.w3school.com.cn/css/css_positioning_floating.asp ·使用浮动(float)的一个比较疑惑的事情是他们怎么影响包含他们的父元素的.如果父元素只包含浮动元素,且父元素未设置高度和宽度的时候. 那么它的高度就会塌缩为零.如果父元素不包含任何的可见背景,这个问题会很难被注意到,但是这是一个很重要的问题.在这里我…

css的尺寸、display的属性、以及浮动和清除浮动的方法

css的尺寸width heightline-height 行高是由三部分构成,上间距 文本高度 下间距,且上下间距相等.所以文字居中.行高:一旦设置了行高,元素内部必须有内容.line-height:3:行高是当前数字x当前字体大小就是行高的值.Display这个属性规定元素以某种形式显示display:none:当前元素不显示,不占用当前的空间了visibility:hidden:当前元素隐藏,还占用当前的空间.display:block:当前元素以块级元素的形式显示出来,往往可以将行级元素…

html--浮动高度塌陷问题

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box1{ border:1px red solid; } .box2{ height:100px; width:100px; background-color:red;} .box3{ hei…

CSS学习：overflow:hidden解决溢出,坍塌,清除浮动

overflow:hidden是overflow属性的一个神奇用法,它可以帮助我们隐藏溢出的元素,清除浮动和解除坍塌. CSS样式: .container{ background-color: black; } .div1{ background-color: aqua; width: 100px; height: 100px; } .div2{ background-color: red; width: 100px; height: 100px; } html内容: <div class=&quo…

高度塌陷与 BFC

1. 高度塌陷 在浮动布局中,父元素的高度默认是被子元素撑开的  当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离将会无法撑起父元素的高度,导致父元素的高度丢失  父元素高度丢失以后,其下的元素会自动上移,导致页面的布局混乱 2. clear(有一定的弊端和隐患) clear作用:清除浮动元素对当前元素所产生的影响(本质是为元素添加一个margin-top属性,值由浏览器自动计算) 可选值:  left 清除左侧浮动元素对当前元素的影响  right 清除右侧浮动元素对当前元素的影响 …