浮动就是让我们的元素脱离标准文档流,目的是为了布局好看!
浮动的现象
  1. 脱离标准文档流被叫做脱流,同时会出现字围现象。
  1. 浮动的元素会相互贴靠,而且如果父容器空间足够大,则浮动的元素会正常紧靠也就是后一个元素会紧靠前一个元素。如果父容器空间不够大,那么元素会找上级的上级去紧靠,如果还找不到则继续找上级紧靠,没有了上级可靠那就靠边。
  1. 浮动的元素不分块级和行内类别,也就是说都可以设置宽高可边距。
  2. 浮动以后,同一行内的元素以顶边作为基线对齐。

为什么浮动会带来影响??????
因为浮动元素不占父标签的高度内容,会导致父标签高度的减少,以及标准文档流光标的上移

解决的核心入手点?
(1)固定父标签高度 (2)固定光标位置

清楚的方法
(1)父标签设置高度
        好处:两个核心点都解决了
       坏处:一。我们以后很少给div固定死高度 二。不容易计算高度

(2)内墙法 clearboth
         是加到不想上移的标签身上
        坏处:不会增加因浮动导致缩小高度的标签增加高度

(3)overflow

主业:超出隐藏部分
    副业:帮助本标签清除浮动带来的影响

(4)第四种:使用伪元素的方式,:after、:before
  1.             使用方法:
                .clearfix:after{
                                  content:"", 这是伪元素添加的内容
                                   display:block,
                                   clear:both, 清除浮动
                                   height:0,
                                   visibility:hidden 不显示出来
                                 }
                .clearfix{
                   *zoom:1;为了兼容IE6、7
                }
                使用方法:
                .clearfix:before, .clearfix:after {
                    content: "";
                    display: table;
                }
                .clearfix:after {
                    clear: both;
                }
                .clearfix {
                    *zoom: 1; /*IE/7/6*/
                }
        区别伪类与伪元素:
            伪类::link :visited  :hover :active  love hate 注意:我们在使用时一定要遵守lvha原则
                    :focus :first-child :last-child等等
            伪元素::after  :before  :first-line :first-letter
            伪类:用于给某一个元素修改css属性,可以看成是给该元素添加了一个类选择器样式
            伪元素:用于给某个元素添加内容及css属性样式,可以看成是在该元素内又加了一个元素

《----css样式---------浮动带来的影响与解决方法---------------》的更多相关文章

  1. 简单物联网:外网访问内网路由器下树莓派Flask服务器

    最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...

  2. 利用ssh反向代理以及autossh实现从外网连接内网服务器

    前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...

  3. 外网访问内网Docker容器

    外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...

  4. 外网访问内网SpringBoot

    外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...

  5. 外网访问内网Elasticsearch WEB

    外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...

  6. 怎样从外网访问内网Rails

    外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...

  7. 怎样从外网访问内网Memcached数据库

    外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...

  8. 怎样从外网访问内网CouchDB数据库

    外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...

  9. 怎样从外网访问内网DB2数据库

    外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...

  10. 怎样从外网访问内网OpenLDAP数据库

    外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...

随机推荐

  1. 解决手机浏览器上input 输入框导致页面放大的问题(记录)

    在微信手机页面开发当中,页面是没有问题的,但是当焦点在input输入框的时候,手机页面会自动放大. 加入以下代码在head 区,可解决此问题 <meta name="viewport& ...

  2. 移动开发那些坑之——safari mobile click事件的冒泡bug

    今天在iphone6 plus的safari上测试这么一段代码: <script> $(document).on('click','.callApp', function() { aler ...

  3. Javascript本地存储小结

    前言 总括:详细讲述Cookie,LocalStorge,SesstionStorge的区别和用法. 人生如画,岁月如歌. 原文博客地址:Javascript本地存储小结 知乎专栏&& ...

  4. 2.EF中 Code-First 方式的数据库迁移

    原文链接:http://www.c-sharpcorner.com/UploadFile/3d39b4/code-first-migrations-with-entity-framework/ 系列目 ...

  5. Entity Framework Extended Library

    扩展了实体框架的功能类库. https://github.com/loresoft/EntityFramework.Extended 1批量更新/删除 1)删除 //delete all users ...

  6. 【C#】给无窗口的进程发送消息

    注:本文适用.net2.0+的winform程序 一个winform程序,我希望它不能多开(但是如何防多开不是本文要讲的),那么在用户启动第二个实例的时候,作为第二个实例来说,大概可以有这么几种做法: ...

  7. SVNKit支持SSH连接

    SVNKit这个开源工具,用于Java语言访问SVN库,咋看的时候很方便,其实坑特别多.我在这里只想跟大家说一句,如果你还没有用过,请不要在生产环境使用这个东西了,兼容性问题搞死你(替换方案是直接用s ...

  8. MySQL5.7 error log时间显示问题

    最近有两三套环境升级到了5.7.16,发现mysql.err中的时间好像有些问题,经查是mysql 5.7后的变更,如下: root@localhost [(none)]>select now( ...

  9. NodeJs端口被占用的情况

    在NodeJs运行的时候,我们往往会遇到一个问题:“端口被占用”,这个问题,我们的处理办法有哪些呢? 这里我只介绍一下linux下的方法: 1.使用nodeme(忘记是不是这个啦,回去查下,这个要安装 ...

  10. UTFGrid

    UTFGrid UTFGrid is a specification for rasterized interaction data. As of version 1.2, it was remove ...