<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul,li{margin:0;padding:0}
ul{border:3px solid black;}
li{width:100px;height:100px;list-style: none;background:blue;}
.li1{width:80px;background:red;float: left;}
.clearfix:after{display: block;content:'';clear:both}
</style>
</head>
<body>
<ul>
<li class="li1"></li>
<li class="li2">1234567890</li>
</ul>
</body>
</html>
 
1.同级关系下,li1浮动，li2不浮动，就会导致li2元素跑到li1下面，但是li2里面的内容会被挤开，
证明了浮动是半脱离文档流的，所以同级关系尽量都浮动
2.同级都浮动的情况下，如果父级没有给高度，
那么父级元素会因为没有内容撑开自身，而导致页面出问题。
　　解决方法：
　　　　　　 a.直接在父级加一个 overflow:hidden
　　　　　　 b.在子级同级再写一个块元素，然后给块元素加上 clear:both
　　　　　　 c.在style里自己添加个伪类.clearfix，
　　　　　　　　.clearfix:after{display: block;content:'';clear:both}
　　　　　　　然后把这个类作为class写在父级上
　　　　　　 d.给父级加上高度，也能解决
　　这四个方法都能解决浮动带来的问题
3.浮动默认把行内元素转为块元素

html浮动小问题的更多相关文章

  1. Unit 6.标准文档流,浮动,清除浮动以及margin塌陷问题

    一. 什么是标准文档流 文本流其实就是文档的读取和输出顺序,也就是我们通常看到的由左到右.由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个 ...

  2. 使用 WPF+ ASP.NET MVC 开发 在线客服系统 （一）

    近段时间利用业余时间开发了一套在线客服系统,期间遇到过大大小小不少问题,好在都一一解决,最终效果也还可以,打算写一个系列的文章把开发过程详细的记录下来. 希望能够和更多的开发人员互相交流学习,也希望有 ...

  3. 如何自学 Java 开发

    如何自学 Java 开发? 568赞同反对,不会显示你的姓名 李艾米IT路上学习 568 人赞同 Java Web前端技术 HTML 入门视频课程 1 HTML 简介 2 HTML基本结构[ 3 HT ...

  4. 转AjaxControlToolkit的安装与使用详解

    AjaxControlToolkit的安装与使用详解 AjaxControlToolkit下载http://ajax.asp.net/downloads/default.aspx?tabid=47ht ...

  5. 用Zim替代org-mode？

    三年前我玩过Zim,当时还写了一篇<Zim - 普通人的Org-mode>,当时还说我还是会坚持使用emacs org-mode.但最近我又在考虑是不是回头用Zim来写博客文章.整理知识库 ...

  6. 解决SurfaceView设置透明造成覆盖其他组件的替代方案

    之前在项目里面绘制摇杆圆盘使用SurfaceView来实现,同时设置SurfaceView透明,但是这样会造成SurfaceView的组件会覆盖其他的组件,一般情况没有关系,而不一般的情况就是有类似上 ...

  7. Objective-C中一些 值得程序员注意的地方(转载)

    1.有关于BOOL陷井方面有如下方面: 关于BOOL条件语句中的比较最好是与NO的值来进行比较,因为BOOL的YES与NO值只是约定,并且编译器将BOOL认作8位二进制数据.若是不小心将一个长于1字节 ...

  8. Android应用Activity、Dialog、PopWindow、Toast窗体加入机制及源代码分析

    [工匠若水 http://blog.csdn.net/yanbober 转载烦请注明出处.尊重劳动成果] 1 背景 之所以写这一篇博客的原因是由于之前有写过一篇<Android应用setCont ...

  9. Android Multimedia框架总结（二十五）MediaProjection实现手机截屏（无须root）

    转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼yuiop:http://blog.csdn.net/hejjunlin/article/details/53966818 前言:一年半多以前 ...

随机推荐

  1. 拓展练习--find查找、打包压缩、服务器、磁盘挂载

    目录 find查找.打包压缩 服务器部分 磁盘挂载及单用户模式 find查找.打包压缩 1.超级用户(管理员用户)提示符是_#,普通用户提示符是$_. 2.如何快速返回上一次所在的目录? cd - 3 ...

  2. Codeforces 1178F DP

    题意:有一张白纸条,你需要给这张纸条染色.染色从颜色1开始染色,每次选择纸条的一段染色时,这一段的颜色必须是相同的.现在给你染色后的纸条,问有多少种染色方案? F1: 思路:最开始的想法是以染色顺序为 ...

  3. 【LeetCode】Array

    [11] Container With Most Water [Medium] O(n^2)的暴力解法直接TLE. 正确的解法是Two Pointers. O(n)的复杂度.保持两个指针i,j:分别指 ...

  4. JS的一些日常

    1. [1] == 1    =>    true; 很神奇.. 2.js变量命名规则: // 1.变量命名必须以字母.下划线”_”或者”$”为开头.其他字符可以是字母._.美元符号或数字. / ...

  5. 处理字符串的一些js/jq方法（去除HTML，去除空格，计算真实长度，截取中英文字符）

    去除html标签: function del_html_tags(str) { var words = ''; words = str.replace(/<[^>]+>/g,&quo ...

  6. 阿里HBase高可用8年“抗战”回忆录

    2017年开始阿里HBase走向公有云,我们有计划的在逐步将阿里内部的高可用技术提供给外部客户,目前已经上线了同城主备,将作为我们后续高可用能力发展的一个基础平台.本文分四个部分回顾阿里HBase在高 ...

  7. Druid动态数据源配置

    上文已经讲了单个数据源的Druid的配置(http://www.cnblogs.com/nbfujx/p/7686634.html) Druid动态数据源配置 主要是继承AbstractRouting ...

  8. MySQL图形化管理工具之Navicat安装以及激活

    软件以及激活包下载地址 1. 安装navicat 双击navicat_trial_11.1.20.0.1449226634.exe,一路下一步安装(记住安装目录) 2. 激活 双击PatchNavic ...

  9. symantec SMG 抓包

    1．使用putty连接SMG,先用admin账号登陆 执行set-support  , 设置一个密码. 2．重新打开一个putty连接SMG,使用support账号登陆.用我们刚才设置的密码. 3．开 ...

  10. 用 Flask 来写个轻博客 (15) — M(V)C_实现博文页面评论表单

    目录 目录 前文列表 实现 post 视图函数 在 posthtml 中添加表单 效果 前文列表 用 Flask 来写个轻博客 (1) - 创建项目 用 Flask 来写个轻博客 (2) - Hell ...