浮动元素引起的问题:
1. 父元素的一级子元素全都为浮动元素的情况下,父元素的高度无法被撑开,影响与父元素同级的元素
2. 与浮动元素同级的非浮动元素(内容)会跟随其后
3. 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构
 
解决方法:
使用 CSS 中的 clear:both; 属性来清除元素的浮动可解决2、3问题,对于问题1,添加如下样式,给父元素添加clearfix样式:
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */
 
清除浮动的几种方法:
1. 额外标签法,<div style="clear:both;"></div>(缺点:不过这个办法会增加额外的标签使HTML结构看起来不够简洁。)
2. 使用after伪类(只适用于非IE浏览器)
#parent:after{
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
}
3. 浮动外部元素
4. 给父元素设置 overflow 为 hidden 或者 auto zoom:1(用于兼容IE6)

CSS浮动相关解决办法的更多相关文章

  1. 【转载】IE浏览器常见的9个css Bug以及解决办法

    IE浏览器常见的9个css Bug以及解决办法 我们在浏览网页的时候经常看见这样的现象:某个网页在IE6浏览器中打开很正常,但是在IE8里面打开可能完全变形了.或者也有可能出现完全相反的现象.这让We ...

  2. github不能访问、加载css、js解决办法

    很奇怪,白天在公司还能正常访问github,晚上回来访问却有问题,表现症状是页面加载慢,并且页面样式明显错乱. 在chrome下用F12开发者工具一看,有2条css和2条js 404 了,猜想应该是g ...

  3. github不能加载css、js解决办法

    很奇怪,上午在公司还能正常访问github,晚点访问却有问题,页面样式明显错乱. 在FireFox下用F12开发者工具一看,有2条css和2条js 404 了,猜想应该是github的DNS被GFW污 ...

  4. Gridea博客无法载入CSS样式的解决办法

    今日在使用Gridea客户端更新博客的过程中,推送到远端仓库后内容显示正常,但是无法载入主题样式,就是没有载入CSS样式,折腾了一下午在搞懂问题出在哪里了,下面说一下自己的解决思路. 问题描述 首先, ...

  5. E浏览器常见的9个css Bug以及解决办法

    我们在浏览网页的时候经常看见这样的现象:某个网页在IE6浏览器中打开很正常,但是在IE8里面打开可能完全变形了.或者也有可能出现完全相反的现象.这让Web程序员及设计师往往为了其CSS在各个IE版本下 ...

  6. 实战中总结出来的CSS常见问题及解决办法

    一.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值. 二.同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次.对 一个标签同时使用cla ...

  7. DIV+CSS 常见问题及解决办法整理

    http://blog.shaogroup.com/divcss-%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E5%8F%8A%E8%A7%A3%E5%86%B3%E5% ...

  8. 几个常见CSS错误和解决办法

    1.IE6下,当float存在时,margin双倍的问题 解决方法:加display:inline; 例: #content {    float: left;     width: 500px;   ...

  9. MTK8127源码编译出现的错误及相关解决办法

    /** * date:2016/8/17 * author: Y.X .YANG */ 按照开发文档提示: 1.MTK提供的开发包目录下有若干个.aa .ab .ac ...的分压缩包.此时应当将这些 ...

随机推荐

  1. 【技术累积】【点】【java】【19】访问权限

    java中的四种访问权限 范围如下表 权限 类内 同包 不同包子类 不同包非子类 Public ✔️ ✔️ ✔️ ✔️ 默认(Default) ✔️ ✔️ ️ Protected ✔️ ✔️ ✔️ P ...

  2. (转)Arcgis for JS实现台风运动路径与影像范围的显示

    http://blog.csdn.net/gisshixisheng/article/details/42025435 首先,看看具体的效果: 初始化状态 绘制中 绘制完成 首先,组织数据.我组织的数 ...

  3. Java+selenium+Firefox/ IE/ Chrome主流浏览器自动化环境搭建

    一.java+selenium+firefox 1.环境准备:JDK1.8 2.安装firefox浏览器v59 3.下载驱动:https://github.com/mozilla/geckodrive ...

  4. yum安装软件中的y/d/N

    yum install vim ........ 总下载量:7.0 M安装大小:23 M Is this ok [y/d/N]: d 参数解析: y:在线下载安装 d:只下载不安装 N:不安装 Bac ...

  5. 45.mapping建立、修改

    主要知识点 1.如何建立索引 2.修改mapping 3.测试mapping         一.如何建立索引 语法 PUT /website { "mappings": { &q ...

  6. Golang - 处理字符串

    目录 Golang - 处理字符串 1. 字符串操作 2. 字符串转换 Golang - 处理字符串 1. 字符串操作 func Contains(s, substr string) bool 字符串 ...

  7. GOF23设计模式之原型模式

    GOF23设计模式之原型模式 1)通过 new 产生一个对象需要飞船繁琐的数据准备或访问权限,则可以使用原型模式. 2)就算 java 中的克隆技术,以某个对象为原型,复制出新的对象.显然,新的对象具 ...

  8. raize5的修改。

    ( ( ; Col1: $; Col2: $; Col3: $; Col4: $ ), ( ; Col1: $; Col2: $FA; Col3: $; Col4: $ ), ( ; Col1: $C ...

  9. 利用echarts做图表统计

    以项目中的扇形统计图为例: 首先,第一步: 引入外部echarts.js文件 其次,第二步: HTML代码块 <div class="count-body-con count-tj&q ...

  10. 暑假集训D14总结

    %dalao 今天dalao继续来讲课~讲的是一个叫kd树的奇怪东西= = 然而啥都没听懂 考试 今天多校联考,日常炸= = 照例打了前两道题的暴力(T1随便hash一下就水过了啊喂),然后开始推T3 ...