CSS——清除浮动的六种解决方案

   内容的高度撑起父元素容器的高度,效果图如下
图片

HTML和CSS代码如下

图片

图片

给p标签加上浮动以后,p{float:left;},此时DIV塌陷,两段内容同行显示,效果如下:
图片


 解决方案一:给前面一个父元素设置高度
      
      !企业开发中,能不写高度就不写,所以这种方式用得很少



解决方案二:给后面的盒子添加clear属性;
       
      !给某个元素添加clear属性后,这个元素的margin属性 就会失效

      CSS代码和效果图如下:
      
图片


图片


解决方案三:外墙法,在两个盒子中间添加一个额外的块级元素,并给这个添加的元素设置clear:both属性。

      !可以让下面的盒子使用margin-top属性,但是上面的盒子margin-bottom属性失效;实际使用时可以直接设置添加的块级元素的高度,从而让上下盒子产生边距。

      HTML代码如下:
     

图片

图片



        效果如下:图片 



决方案四:内墙法,在第一个盒子所有子元素最后添加一个额外的块级元素,给这个额外的块级元素设置clear:both属性。
        
       !可以让第一个盒子使用margin-bottom属性,也可以让第二个盒子使用margin-top属性。      
       
      HTML代码如下:
图片


效果如图:
 图片

此时第一个盒子的高度被撑起,显示出了背景色。但由于添加了额外的元素,因此在开发中不推荐使用这种方式。



解决方案五:利用伪元素添加块级元素清除浮动
 
  代码如下:
 图片


效果如下:
图片
      
解决方案六: overflow:hidden;   1.可以将超出标签范围的内容裁剪掉
                                                         2.清除浮动
                                                         3.两个嵌套的盒子,可以让里面的盒子在设置margin-top时,外边的盒子不被顶下来。


代码如下:
图片
 

 同时,上面盒子的margin-bottom和下边盒子的margin-top都可以正常使用。

效果如图:
图片 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369734.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

40个Java Collections面试问答

Java Collections Framework是Java编程语言的基本方面。 这是Java面试问题的重要主题之一。 在这里,我列出了Java集合框架的一些重要问题和解答。 什么是Java Collections Framework? 列出Collections框架的一些好处? 集合框架中泛型的好处…

AtCoder Beginner Contest 084(AB)

A - New Year 题目链接:https://abc084.contest.atcoder.jp/tasks/abc084_a Time limit : 2sec / Memory limit : 256MB Score : 100 points Problem Statement How many hours do we have until New Year at M oclock (24-hour notation) on 30th, December? Cons…

等待正确的时刻–集成测试

当您必须测试多线程程序时,总是需要等到系统达到特定状态后,测试才能验证是否达到了正确的状态。 这样做的通常方法是在系统中插入一个“探针”,该探针将向同步原语发出信号 (例如Semaphore ),并且测试将一…

网络编程---黏包

基于UDP协议的socket udp的server 不需要进行监听也不需要建立连接,在启动服务之后只能被动的等待客户端发送消息过来。 客户端发送消息的同时还会 自带地址信息,消息回复的时候 不仅需要发送消息 还需把对方的地址填上。 udp的client 不需要connect 因为…

CSS布局(二) 盒子模型属性

盒子模型的属性 宽高width/height 在CSS中,可以对任何块级元素设置显式高度。 如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效果,就好像有额外的内边距一样; 如果指定高度小于显示内容所需高度,取决于…

Extjs 下拉框

刚刚熟练了easyui控件的使用,又開始了如今的这个项目。这个项目是个半成品。前端使用的是Extjs控件,jsp中没有代码。就引用了非常多的js。。。于是乎有种不知所措了呀。。。 说实话特别的不想去看那些代码,第一是不熟悉,第二是太乱…

python输入代码界面通常_vscode写python时的代码错误提醒和自动格式化的方法

python的代码错误检查通常用pep8、pylint和flake8,自动格式化代码通常用autopep8、yapf、black。这些工具均可以利用pip进行安装,这里介绍传统的利用pip.exe安装和在VScode中安装两种方式。【温馨提醒】要使用flake8或要想flake8等工具起作用&#xff0c…

java编译找不到符号_关于久违的Javac,编译出现“找不到符号”

参考文档:http://blog.csdn.net/qq369201191/article/details/49946609工作以来习惯了maven编译,已经忘记了javac这个东东,以至于遇到javac问题时困惑了,下面总结一下,以便后者参考。一、使用javac进行项目java文件编译…

某些小时后MySql连接自动掉线

MySql配置为删除任何闲置超过8小时的连接。 这意味着什么? 在8个小时的间隔后返回到已部署的应用程序之后(如果未更改默认SQL参数),将会遇到异常情况。 如何解决这个问题? 增加wait_time参数-不是一个好主意&#xff…

shopxx 阿里云OSS设置

shopxx 使用文档没有啊,只能自己看了 数据中心 字段其实是 EndPoint字段 URL前缀 是 图片服务器的主机地址。这个在阿里云回传的时候是不带的。 对应 阿里OSS 外网域名 转载于:https://www.cnblogs.com/nanahome/p/7346641.html

我的HTML总结之常用基础便签

HTML&#xff1a;是Hyper Text Markup Language&#xff08;超级文本标记语言&#xff09;的缩写&#xff0c;HTML不是一种程序&#xff0c;只是一种控制网页中数据显示的标识语言。 HTML由一组标签组成。 HTML的基本结构 <html> <head> <title>第一个HTML示…

您是否应该信任JVM中的默认设置?

如今&#xff0c;JVM被认为是智能的。 预期不会进行太多配置–只需设置要在启动脚本中使用的最大堆&#xff0c;您就可以进行了。 所有其他默认设置都很好。 大概我们当中有些人误以为。 实际上&#xff0c;在运行时期间发生了很多事情&#xff0c;无法自动调整性能&#xff0c…

【翻译】A Next-Generation Smart Contract and Decentralized Application Platform

原文链接&#xff1a;https://github.com/ethereum/wiki/wiki/White-Paper 当中本聪在2009年1月启动比特币区块链时&#xff0c;他同时向世界引入了两种未经测试的革命性的新概念。第一种就是比特币&#xff08;bitcoin&#xff09;&#xff0c;一种去中心化的点对点的网上货币…

css小随笔(二)与通用样式

51先在学校HTML5已经有半个多月了&#xff0c;然后这个星期做了一个京东的手机网站&#xff0c;接触到了通用样式&#xff0c;下面以京东的手机站为例 这两个就是京东手机站了的不同的两个板块&#xff0c;因为HTML5仅仅只是学完了基本标签跟css的标签&#xff0c;所以在没有接…

增加堆大小–谨防眼镜蛇效应

“眼镜蛇效应”一词源于英国殖民印度统治英国时所产生的轶事。 英国政府担心毒蛇眼镜蛇的数量。 因此&#xff0c;政府对每条死蛇给予悬赏。 最初&#xff0c;这是一个成功的策略&#xff0c;因为大量蛇被杀死以获取奖励。 最终&#xff0c;印度人开始养殖眼镜蛇以赚取收入。 …

如何创建可扩展的Java应用程序

开放的扩展使许多应用程序受益。 这篇文章描述了两种在Java中实现这种可扩展性的方法。 可扩展的应用 可扩展应用程序是可以扩展其功能而不必重新编译它们 &#xff0c;有时甚至不必重新启动它们的应用程序。 只需将jar添加到类路径中&#xff0c;或通过更复杂的安装过程来实现…

关于盒模型的一点总结

标准w3c盒模型图示 关于怪异盒模型和标准盒模型的对比 关于怪异盒模型盒标准盒模型之间的转换

Day 9 函数的初识1

def my_len(): l1 [1,2,3,5,6] print(111) print(222) return print(333)print(my_len())一、函数的定义1.遇到return &#xff0c;此函数结束&#xff0c;if 不在向下进行:2.return 的返回值 1. 不写return 返回为none 2. return non &#xff0c;和1 …

将大型项目从Ant迁移到Maven

事实是&#xff0c;我们处在艰难时期。 我们花了将近三个月的时间将构建机制从Ant迁移到Maven 。 如果您打算在大型项目中做同样的事情&#xff0c;那就是您必须安排的最短时间。 我们仍在努力解决这种迁移带来的一些附带影响&#xff0c;但幸运的是&#xff0c;它们并不是那么…

移动端布局方案探究

研究了淘宝&#xff0c;天猫和网易彩票163的wap主页样式布局&#xff0c;总结移动端布局方案 注意&#xff1a;代码运行是file协议&#xff0c;在chrome里不支持引用本地文件&#xff0c;会提示跨域错误&#xff0c;可以用firefox或者Safari打开 当时做的ppt下载: 2015年12月移…