cp from : https://www.cnblogs.com/cielzhao/p/5781462.html

最近在项目中有好几次遇到这个问题，感觉是浮动引起的，虽然用<div style="clear:both"></div>解决了，但自己不是特别明白，又在网上查了相关内容，是因为给li设置了浮动之后它就脱离当前正常的文档流，所以没办法撑开外层ul的高度。

以下面代码为例，其实有好几种解决方法，我用的这种并不是最简单的。

<!DOCTYPE html >

<html >

<head>

<meta charset="utf-8">

<title>给li设置float浮动属性之后，无法撑开外层ul的问题。</title>

<style type="text/css">

ul{

    border: 1px solid #000;

    width: 200px;

    height: auto;

    margin-top: 100px;

}

li{

    float: left;

    list-style: none;

    margin-left: 10px;

}

</style>

<body>

<ul>

    <li>星期一</li>

    <li>星期二</li>

    <li>星期三</li>

    <li>星期四</li>

    <li>星期五</li>

    <li>星期六</li>

    <li>星期天</li>

</ul>

</body>

</html>

以上代码显示结果如图，ul的边框变成了一条线，没有被撑开，；

可是我期望的效果是这样的：。

如果ul里边的内容是固定的，给ul加上高度就可以解决问题，但是遇到的项目中li是动态生成的，个数不能确定，所以高度只能设置成auto，这时候其实只要给外层ul也加上浮动属性就可以解决问题，但有时候布局会受到影响，只能根据情况而定；另外给ul加上overflow:auto/hidden也可以解决问题，如果要兼容ie6，后面加上"zoom:1"或者"width:100%"即可。

最后再总结一下，总共有4种方法：

第1种方法：在html代码里边给最后一个li后面加空元素清除浮动，div可以换成p或者其他。具体如下图:

第2种方法：给ul设置固定的高度。具体如下图:

第3种方法：给ul设置overflow属性，也可以是overflow:hidden。具体如下图:

第4种方法：给ul加浮动属性，可以换成float:right，但是很有可能布局就会收到影响。具体如下图:

每个人用的方法应该都不一样，我觉得第三种方法最简单，以后就用这种。哈哈，这会下班回家~~

[Web前端] 给li设置float浮动属性之后，无法撑开外层ul的问题。的更多相关文章

  1. 给li设置float浮动属性之后，无法撑开外层ul的问题。

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

  2. 给li设置float浮动属性之后，无法撑开外层ul的问题。（原址：http://www.cnblogs.com/cielzhao/p/5781462.html）

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

  3. [Web 前端] inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移

    cp from : https://blog.csdn.net/iefreer/article/details/50421025 在表单修改界面中常会使用一个标签.一个内容加一个修改按钮来组成单行界面 ...

  4. 【CSS学习】--- float浮动属性

    一.前言 浮动元素以脱离标准流的方式来实现元素的向左或向右浮动,并且浮动元素还是在原来的行上进行浮动的.float浮动属性的四个参数:left:元素向左浮动:right:元素向右浮动:none:默认值 ...

  5. [转] CSS float 浮动属性

    http://www.cnblogs.com/polk6/p/3142187.html CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式: ...

  6. CSS float 浮动属性

    本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...

  7. Web前端之复选框选中属性

    熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好 了.博主之前用户不少方法,经常Google到一些这个不好那个 ...

  8. web前端（6）—— 标签的属性，分类，嵌套

    属性 HTML标签可以设置属性,属性一般以键值对的方式写在开始标签中 1.HTML标签除一些特定属性外可以设置自定义属性,一个标签可以设置多个属性用空格分隔,多个属性不区分先后顺序. 2.属性值要用引 ...

  9. web前端css定位position和浮动float

    最近做了几个项目:配资公司,ecmal商城等,客户对前台要求都很高.所以,今天来谈谈css的基础,以及核心,定位问题. div.h1或p元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框 ...

随机推荐

  1. java List去重方式及效率对比

    对List去重并保证添加顺序主要有三种方式: 方式一,利用HashSet不能添加重复数据的特性 由于HashSet不能保证添加顺序,所以只能作为判断条件: private static void re ...

  2. mybatis中的增删改查操作

    在这一个部分,主要进行增删改查的示例书写. 增删改查可以基于xml的,也可以基于注解的方式. 一:对单条数据的查询 1.目录结构 这个使得目录更加清晰 2.User.java 这个使用以前的user表 ...

  3. 电脑同时安装Python2和Python3以及virtualenvwrapper（转）

    电脑同时安装Python2和Python3以及virtualenvwrapper  https://www.jianshu.com/p/d22f19496e03   windows: 1 下载地址:P ...

  4. P1679 神奇的四次方数

    P1679 神奇的四次方数用一些什么东西组成一个什么东西,要求什么东西最优,这时候要考虑背包,不过要分析清楚是什么类型的背包.这题显然是个完全背包. #include<iostream> ...

  5. 024.Zabbix告警等级机制

    一 等级告警 告警升级可以对告警结果按自定义的时间段进行进行消息发送,并执行命令,形成一个梯度的告警处理. 二 按时间自定义告警梯度 2.1 添加时间发生的时间戳和发送时间 2.2 设置三个等级梯度 ...

  6. 【*】单线程的redis为什么吞吐量可以这么大

    一.Redis的高并发和快速原因 1.redis是基于内存的,内存的读写速度非常快: 2.redis是单线程的,省去了很多上下文切换线程的时间: 3.redis使用多路复用技术,可以处理并发的连接.非 ...

  7. 关于set

    set 这是一个十分神奇的东西 他的基本原理是平衡树 而且这个set的运用其实方便了一些在计算时间上的优化(STL大法好) 其实是因为我不会写平衡树 这个set的基本用法如下: iterator 指针 ...

  8. 24.python中类的方法

    类中的方法,其实就是类中的函数,可以分为:实例方法,类方法,静态方法.方法和字段一样,也是属于类的属性,所以也具有运行中修改的特效, 但一般不推荐这样做. 我在类的基本语法中,介绍了构造器方法:__i ...

  9. BZOJ.5248.[九省联考2018]一双木棋chess(对抗搜索 记忆化)

    BZOJ 洛谷P4363 [Update] 19.2.9 重做了遍,感觉之前写的有点扯= = 首先棋子的放置情况是阶梯状的. 其次,无论已经放棋子的格子上哪些是黑棋子哪些是白棋子,之前得分如何,两人在 ...

  10. Ural 2045. Richness of words 打表找规律

    2045. Richness of words 题目连接: http://acm.timus.ru/problem.aspx?space=1&num=2045 Description For ...