很多情况下我在写div的时候都不会把高度写死，而是用子元素撑开高度的方式，但是如果子元素设置了浮动或者position绝对定位，就相当于把子元素从文档流中拿出来了，这时父元素的高度就不能被子元素撑开了，那么原本在文档流中跟在父元素后面的元素很有可能被遮挡住。解决方法：

1. 给父元素设置一个最小高度min-height，或者给非绝对定位的子元素设置高度

2. 在父元素结束前添加一个div，清除浮动

浮动元素在窗口缩小时可能会被挤到下面，解决方法：给父元素设置overflow：hidden，这样被挤下去的元素就被隐藏了。

img标签会自带一个边距，解决方法：1. 将img块状化；2. 将img左浮动；3.  为img添加样式img{vertical-align:top|bottom|text-top|text-bottom;}；4. 为img的父级加高度；5. 为img的父级加样式 font-size:0；

【20190129】CSS-定位问题记录的更多相关文章

  1. 【从0到1学Web前端】CSS定位问题一(盒模型,浮动,BFC) 分类： HTML+CSS 2015-05-27 22:24 813人阅读 评论(1) 收藏

    引子: 在谈到css定位问题的时候先来看一个小问题: 已知宽度(假如:100px)div框,水平居中,左右两百年的分别使用div框填充.且左右div自适应. 效果如下图: 这个问题的难点主要是浏览器宽 ...

  2. HTML与CSS学习记录

    title: HTML与CSS学习记录 toc: true date: 2018-09-10 14:04:59 <HTML与CSS进阶教程读书笔记> HTML基础知识 HTML与XHTML ...

  3. css定位问题的记录

    postion:relative是子块级元素面向父级元素的相对定位,定位关键字使用left/right/top/bottom.兄弟块元素之间相对进行定位,但是position移动后,原位置依然保留.而 ...

  4. pure.css 学习记录

    兼容性记录: IE 8+ Latest Stable: Firefox, Chrome, Safari iOS 6-8 Android 4.x 处理兼容性 <!--[if lte IE 8]&g ...

  5. css布局记录之双飞翼布局、圣杯布局

    双飞翼布局和圣杯布局是比较常用的布局方式,都是为了实现一行三列,并且两侧列固定宽度,中间列宽度自适应的效果:直接上代码记录下: <!DOCTYPE html> <html lang= ...

  6. CSS字体记录

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaYAAACnCAIAAADVOG9FAAAgAElEQVR4nOy9eXwcxZk/vL/9ve8eb7 ...

  7. css学习记录

    1 !important 表示此属性需要优先考虑: <head>    <title>Page Title</title>    <style type=&q ...

  8. css一些记录

    比如右侧链接:更多   ,定义此span float:right ,但是 更多 要写在 短标题的左边  比如:<span>更多</span> <font>这是短标题 ...

  9. css 样式 记录

    /* Track */::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-bo ...

  10. 【从0到1学Web前端】CSS定位问题三(相对定位,绝对定位) 分类： HTML+CSS 2015-05-29 23:01 842人阅读 评论(0) 收藏

    引子: 开始的时候我想先要解决一个问题,怎么设置一个div盒子撑满整个屏幕? 看下面的html代码: <body> <div id="father-body"&g ...

随机推荐

  1. Android开发 - 掌握ConstraintLayout（四）创建基本约束

    上一篇我们介绍了编辑器的基本使用,本文我们介绍创建基本的约束. "约束"表示View之间的位置关系.当我们在ConstraintLayout布局中创建View时,如果我们没有添加任 ...

  2. Git入门基础详情教程

    前言 写了一篇文章<一篇文章了解Github和Git教程>还觉得不错,继续写了<为了Github默默付出,我想了解你>,那么继续写Git 基础知识. Git 官网:https: ...

  3. ElasticSearch权威指南学习（排序）

    排序方式 相关性排序 默认情况下,结果集会按照相关性进行排序 -- 相关性越高,排名越靠前. 相关性分值会用_score字段来给出一个浮点型的数值,所以默认情况下,结果集以_score进行倒序排列. ...

  4. Java 中的伪共享详解及解决方案

    1. 什么是伪共享 CPU 缓存系统中是以缓存行(cache line)为单位存储的.目前主流的 CPU Cache 的 Cache Line 大小都是 64 Bytes.在多线程情况下,如果需要修改 ...

  5. 顺序栈,链栈,队列java实现

    顺序栈 /** * 顺序栈 * */ public class SqStack { //栈的大小 private int maxSize; //栈顶指针 private int top; privat ...

  6. 使用 Portainer UI 管理 Docker 主机

    Docker 使用命令行的方式来管理有时候并没有那么直观,可以使用 Portainer 的 UI 来管理 Docker 主机和 Docker Swarm 集群. 安装 Portainer 环境:cen ...

  7. Java高并发之设计模式

    本文主要讲解几种常见并行模式, 具体目录结构如下图. 单例 单例是最常见的一种设计模式, 一般用于全局对象管理, 比如xml配置读写之类的. 一般分为懒汉式, 饿汉式. 懒汉式: 方法上加synchr ...

  8. 自动化测试 | UI Automator 入门指南

    自动化测试的定义,这里先引用一段维基百科的定义: 在软件测试中,测试自动化(英语:Test automation)是一种测试方法,使用特定的软件,去控制测试流程,并比较实际的结果与预期结果之间的差异. ...

  9. centos7 常用工具包安装

    .虚拟机上传下载组件( 支持从windows直接拖拽文件,相当好用) yum -y install lrzsz rz+文件名(上传) sz+文件名(下载) .gcc (nginx之类由c语言开发的,编 ...

  10. ProxySQL 配置详解及读写分离(+GTID)等功能说明 (完整篇)

    ProxySQL是灵活强大的MySQL代理层, 是一个能实实在在用在生产环境的MySQL中间件,可以实现读写分离,支持 Query 路由功能,支持动态指定某个 SQL 进行 cache,支持动态加载配 ...