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. qString转char*

    char *vi_name = new char[vi_rsc_name.length()]; strcpy(vi_name,vi_rsc_name.toStdString().data()); de ...

  2. linux通过wget直接下载jdk

    下载语句: tar包下载 wget --no-check-certificate --no-cookies --header "Cookie: oraclelicense=accept-se ...

  3. thinkphp5.0未定义变量模板中提示错误

    在用tp5.0做一个项目网站,公共头需要用到一个变量,但这个变量又不想挨着定义,然后,刷新前台的时候就给提示,未定义变量. 直接放解决方案: 在config.php文件顶部添加: error_repo ...

  4. Spring Cache缓存技术的介绍

    缓存用于提升系统的性能,特别适用于一些对资源需求比较高的操作.本文介绍如何基于spring boot cache技术,使用caffeine作为具体的缓存实现,对操作的结果进行缓存. demo场景 本d ...

  5. ES8之async/await学习随笔

    详细学习参考文档: 阮一峰老师的博客,覆盖知识点ES6/7/8/9,本篇学习笔记对阮老师的关于async/await文档中的知识点进行分点总结 在ES8中加入async/await新特性后,很明显带来 ...

  6. sublime text3中文乱码问题解决方案

    1. 首先需要安装包convertToUTF8,安装完重启后如果仍然不能正常显示中文,则需要进行用户配置. 2.用户配置:preferences>settings 在用户设置加入一个属性:&qu ...

  7. 【BZOJ】3732: Network【Kruskal重构树】

    3732: Network Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 2812  Solved: 1363[Submit][Status][Dis ...

  8. centos7 做rails 执行rails server 报错

    做操作rails   server 时  报错 这个错误时因为一些东西没有安装 gem install execjsgem install therubyracersudo apt-get insta ...

  9. 《Go语言实战》摘录：7.1 并发模式 - runner

    7.1 并发模式 - runner

  10. Android自己定义控件系列二：自己定义开关button（一）

    这一次我们将会实现一个完整纯粹的自己定义控件,而不是像之前的组合控件一样.拿系统的控件来实现.计划分为三部分:自己定义控件的基本部分,自己定义控件的触摸事件的处理和自己定义控件的自己定义属性: 以下就 ...