很多情况下我在写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. JS中多维数组的深拷贝的多种实现方式

    因为javascript分原始类型与引用类型(与java.c#类似).Array是引用类型,所以直接用=号赋值的话,只是把源数组的地址(或叫指针)赋值给目的数组,并没有实现数组的数据的拷贝.另外对一维 ...

  2. what does GIT PUSH do exactly?

    有效理解 git 的对象模型 https://stackoverflow.com/questions/26005031/what-does-git-push-do-exactly 所谓分支, 就是一个 ...

  3. bootstrap教程，SQL

    版权声明:未经博主允许不得转载 SQL DDL数据定义语言 TPL事务处理语言 DCL数据控制语言 DML数据操作语言 DML SELECT INSERT UPDATE DELETE Join从句 J ...

  4. spring框架学习笔记1：搭建测试

    Spring框架介绍: Spring框架涵盖了web.service.dao三层,本身是一个存放对象的容器 形象来说:Spring是项目中对象管家 Spring框架的两大核心思想:控制反转(IOC). ...

  5. 关于No mapping found for HTTP request with URI...

    当你看到这篇博客,说明你已经像我一样快疯了!但是还好..找到了!!! 网上的那些东西真心看了更闹心,因为还没解决... 原因一.访问路径确实错了,导致Dispatcher找不到给你传达的地方,修改下领 ...

  6. Spring Boot 单元测试详解+实战教程

    Spring Boot 的测试类库 Spring Boot 提供了许多实用工具和注解来帮助测试应用程序,主要包括以下两个模块. spring-boot-test:支持测试的核心内容. spring-b ...

  7. 如何用java POI将word中的内容导入到mysql数据库中

    由于作业需要,要求我们将word文档中的数据直接导入到mysql中,在网上找了很常时间,终于将其解决. 由于比较初级,所以处理的word文档是那种比较规范的那种,条例比较清晰,设计的思路也比较简单,就 ...

  8. can only concatenate tuple (not "int") to tuple问题原因

    #测试程序 import os from pydub import AudioSegment #已经确定, # enPath = "%s%s/%s"%(enDir,file,enf ...

  9. centos6.6 安装adb环境

    a.安装JDK环境 centos linux JAVA(openjdk)软件包名 1.java-1.7.0-openjdk (OpenJDK Runtime Environment) 2.java-1 ...

  10. EIGRP路由协议的简单理解及应用

    1.EIGRP 增强型内部网关路由协议 他是动态路由协议,是思科私有的路由协议(2013年已经公有化) 特点:   1)路由更新:闪速更新:触发式更新:路由增量更新 2)协议更新采用组播地址来维持EI ...