很多情况下我在写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（二）介绍

    介绍 发布时间 ConstraintLayout是在2016的Google I/O大会上发布的,经过这么长时间的更新,现在已经非常稳定. 支持Android 2.3(API 9)+ 目前的Androi ...

  2. js验证身份证号，超准确

    js验证身份证号,超准确 看程序前先来了解下身份证号的构成:身份证号分为两种,旧的为15位,新的为18位.身份证15位编码规则:dddddd yymmdd xx p    其中 dddddd:地区码  ...

  3. 使用new Image()进行预加载

    概述 这篇博文记录了用new Image()进行预加载的总结,供以后开发时参考,相信对其他人也有用. 旧的预加载 一般我们为了让背景图更快的加载,我们常常把背景图放在一个display:none的im ...

  4. 利用nodejs安装并运行express的三个坑

    概述 这是我安装并运行express的三个坑,应该是比较常见的,在此记录一下. 内容 express不是内部或外部命令 输入命令:express -V 报错:'express' 不是内部或外部命令,也 ...

  5. OpenStack-Ocata版+CentOS7.6 云平台环境搭建 —9.块存储服务（cinder）部署配置

    块存储服务部署相关块存储服务(cinder)为实例提供块存储.存储的分配和消耗是由块存储驱动器,或者多后端配置的驱动器决定的.还有很多驱动程序可用:NAS/SAN,NFS,ISCSI,Ceph等.典型 ...

  6. C++ vector 容器浅析

    一.什么是vector? 向量(Vector)是一个封装了动态大小数组的顺序容器(Sequence Container).跟任意其它类型容器一样,它能够存放各种类型的对象.可以简单的认为,向量是一个能 ...

  7. Spring Boot发布将jar包转为war包。

    Spring Boot是支持发布jar包和war的,但它推荐的是使用jar形式发布.使用jar包比较方便,但如果是频繁修改更新的项目,需要打补丁包,那这么大的jar包上传都是问题.所以,jar包不一定 ...

  8. Ehcache3开发入门简介

    在高并发应用中缓存就是核心机制.最近在研究Ehcache,发现这是一个更加灵活易用的缓存框架(相对于Redis.Memcache),Ehcache更加小巧轻便.而且都有持久化机制,不用担心JVM和服务 ...

  9. git 服务器搭建及提交代码检查

    本地 git 服务,通常都会选择 gitlab.本人最先也是选择 gitlab,在 centos7 上按照官网的步骤进行安装,下载的速度难以忍受,无奈放弃.最终选择在 docker 中安装 gogs ...

  10. 2 jquery选择器

    一基本选择器 #id .class  elment  *  select1, select2, select3... 例 $("span, #two").css("bac ...