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

高度塌陷的含义：

父元素的高度，默认被子元素撑开，目前来讲box2多高，box1就多高。此时如果子元素设置浮动，则会导致其完全脱离文档流，子元素脱离文档流将无法撑开父元素， 导致父元素的高度丢失，就是我们说的高度塌陷问题。父元素一旦高度塌陷，则它下边的元素会向上移动， 导致整个页面的布局混乱 。

定位(position)：

定位一共有4种：relative,absolute,fixed,static

relative:相对定位就是在自己原先的位置上进行定位，没有脱离文档流，还占着原先的位置，比如设置position:relative,left:2px;top:2px,这个意思是在原来的位置上往左移动了2个px,往后面移动了2px

absolute:绝对定位就是相对于已经定位的兄弟元素或者父元素

fixed:固定定位，相当于固定在浏览器的某个位置。

整理高度塌陷与BFC

当面试官问道你高度塌陷时,人们第一想到的方法一定是 .clearfix::after { content: ''; display: block; clear: both; visibility: h ...

高度塌陷与BFC

高度塌陷的产生条件 子元素浮动,脱离文档流 子元素绝对定位或固定定位,脱离文档流 定位产生的高度塌陷只能通过加固定高度或更换其他方案解决塌陷,本文主要讨论浮动产生塌陷的解决方法. 高度塌陷的解决方法 ...

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

浅谈 清除浮动 的多种方式(clearfix) 1.什么是浮动 ? 是否脱离文档流? 1.普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式 页面中的块级元素 ...

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

浮动很好用,但是用浮动后,当浮动元素的父级元素没有高度时,就会造成高度塌陷,从而影响布局.下面就从一开接触前端时,渐渐发现解决高度塌陷的问题的方式. 一.给浮动元素的父级元素添加固定的高度css[he ...

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

浮动引发的高度塌陷问题 高度塌陷问题的产生 BFC(Block Formatting Context)的引入 元素开启BFC后的特点 开启BFC的元素不会被其他浮动元素所覆盖 开启BFC的元素不会发生 ...

关于float高度塌陷问题

和所有刚入门的菜鸟一样,我发现float有高度塌陷问题,又很偶然的发现float元素后加能消除float带来的破坏性. 后来百度了一下,大部分的float高度塌陷问题都没有提及 ...

CSS高度塌陷

问题描述:当父元素只包含浮动的元素的时候,且父元素没有设置高度,如果父元素设置了边框border,那么看起来子元素不在父元素之内. 比如这样: html:

guava中eventbus注解使用

guava是 google 几个java核心类库的集合,包括集合.缓存.原生类型.并发.常用注解.基本字符串操作和I/O等等.学会使用该库相关api的使用,能使我们代码更简洁,更优雅,本章节我们来谈谈 ...

Struts(十七)：通过CURD来学习paramsPrepareParams拦截器栈

背景: 通过上一章节学习了ModelDriven拦截器的用法,上章节中讲到了edit功能. 要修改 ...

js在光标处插入内容

//场景一 简易的页面可以这样写var range = window.getSelection().getRangeAt(0);range.insertNode(document.createText ...

python主成分分析

#-*- coding: utf-8 -*- #主成分分析 降维 import pandas as pd #参数初始化 inputfile = '../data/principal_component ...