【HTML/CSS】浮动模型和清除浮动的方法_浮动模型及清除浮动的方法-程序员宅基地

技术标签: css  前端基础  html  

1 浮动

  1. 浮动是让元素脱离文档流,浮动前后的非定位元素会无视浮动元素,可能沿着元素另一侧垂直流动。
  2. 浮动元素会生成一个块级框,具有块级元素的特性,但是不占整行。
  3. 浮动元素脱离了文档流,无法为文档流中的父元素撑起高度,造成父盒子塌陷的问题

2 清除浮动

  1. clear:left左侧不允许浮动元素
  2. clear:right右侧不允许浮动元素
  3. clear:both两侧不允许浮动元素

3 清除浮动的技巧

  1. 添加一个空的div + clear:both清除浮动,添加了无意义的html代码
  2. 给父元素添加overflow:hidden,父元素本身形成一个BFC,BFC可以包裹浮动流,BFC中浮动元素的高度也被计算在内,可以实现清除浮动,但是无法显示溢出的元素。
  3. 给父元素设置伪元素清除
    .clearfix::after {
          
    	content: '';
    	display: block;
    	clear: both;
    	height: 0;
    	visibility: hidden;
    }
    .clearfix{
          
    	*zoom: 1 /*兼容IE 会触发haslayout*/ 
    	/*haslayout是IE浏览器引擎的一个组成部分,
    	在IE中,一个元素要么根据自身内容进行布局,要么根据父元素进行布局。
    	haslayout=“true”,元素会根据自身的内容去调整大小,
    	而非依赖父元素去渲染自己。
    	haslayout = “false”,该元素会依赖于父元素渲染自己。*/
    }
    
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/xd963625627/article/details/114284594

智能推荐

VulnRecap 24 年 1 月 22 日 – 观看 Chrome、Ivanti、Citrix 问题-程序员宅基地

文章浏览阅读18次,点赞4次,收藏4次。本周的漏洞新闻包括 GitHub 凭证访问、新的 Chrome 修复程序以及来自中国网站托管的盗版应用程序的隐藏恶意软件。 随着 Netscaler 和 Endpoint Manager Mobile 中出现更多漏洞,Citrix 和 Ivanti 也遇到了更多问题.确保您的安全团队定期检查供应商的软件和硬件更新是否有任何补丁,并特别关注网络设备。 如果您有 GitHub 实例,请导入所有必要的新密钥.

SpringCloud学习笔记(十二、断路器监控),springcloud视频教程-程序员宅基地

文章浏览阅读515次,点赞25次,收藏10次。if(!System.err.printf(“端口%d被占用了,无法启动%n”, port );

vim常用快捷键_vim 常用快捷键大全-程序员宅基地

文章浏览阅读424次。一.文本模式下常用的快捷键:(一)一般模式切换到编辑模式: 1. i 在光标所在处插入 2. a 在光标下一字符处插入 3. o 在光标所在行下一行插入新一行 4. O 在光标所在行上一行插入新一行 5. [Esc] 退出编辑模式(二)一般模式: 移动光标(n为数字): 1. G 移动到文件的最后一行 _vim 常用快捷键大全

Linux服务器每次ssh登入时,conda无效_ssh conda-程序员宅基地

文章浏览阅读95次。Linux服务器每次ssh登入时,conda无效_ssh conda

操作系统:进程调度算法(FCFS、SJF、HRRN、RR、HPF、MFQ)_抢占式hpf-程序员宅基地

文章浏览阅读825次。​时间片轮转调度算法(RR):这的基本思想是将CPU的时间分割成若干个小的时间段,称为时间片,将这个时间片分给每一个进程,在这段时间内这个进程会在CPU中执行在这个法 中有两种情况程序会让出CPU:当时间片用完了之后这个进程的程序还没有执行完毕,则会让出CPU重新进入就绪队列等待被选中,CPU会继续从就绪队列中选择下一个进程执行。当时间片还没用完,程序发生阻塞或者执行完毕,也会立即让出CPU。在这个算法中时间片的大小很重要,要是太小则会导致CPU上下文切换频繁,浪费资_抢占式hpf

在浏览器地址栏输入URL并按下回车后,发生了什么?DNS?UDP?TCP?_浏览器向dns服务器发出域名解析请求并获得结果②在浏览器中输入url并按下回车键-程序员宅基地

文章浏览阅读655次。例如:在浏览器地址栏输入www.taobao.com,按下回车,发生了什么?1. 浏览器会进行DNS域名解析,拿到域名对应的服务器ip地址,再用该ip去访问web服务器DNS域名解析的过程:1.将待解析的域名放入DNS请求报文,以UDP报文段方式发给本地域名服务器2.若本地域名服务器有查找到域名映射的信息,则把对应的IP地址放在响应报文中返回3.若本地域名服务器没有查找到映射的信息,则会..._浏览器向dns服务器发出域名解析请求并获得结果②在浏览器中输入url并按下回车键

随便推点

Ubuntu 下安装 QQ_ubuntu安装qq-程序员宅基地

文章浏览阅读2.8w次,点赞27次,收藏130次。Linux for QQ 在Ubuntu系统下安装_ubuntu安装qq

消防应急照明和疏散指示系统在建筑行业的应用_集中控制型和非集中控制型消防应急照明和疏散指示系统谁的应用广泛-程序员宅基地

文章浏览阅读811次,点赞20次,收藏17次。有的建筑虽然也需要消防控制室,但是不在太建筑内,例如一个建筑群内仅在一个单体内设置了消防控制室,其余单体仅设置报警控制器并将相关报警线路引至消防控制室,这种情况也认为是设置消防控制室的,消防应急照明需要采用集中控制型,可以将系统的主机设置在消防控制室中,单体设置区域分机线路汇总到主机。基于此保证在火灾发生时,能够准确改变消防应急标志灯具的指示方向,点亮消防应急照明灯,帮助建筑内的人群选择逃生疏散路线,指引安全的逃生方向,保障群众的人身安全,为各类用户担心的安全问题解决了后顾之忧。5.4.4权限管理界面。_集中控制型和非集中控制型消防应急照明和疏散指示系统谁的应用广泛

ESXI物理机安装提示No Network Adapters-程序员宅基地

文章浏览阅读3k次。下载好ESXI并且刻录了U盘,准备在物理PC机安装ESXI时,提示No Network Adapters找不到网卡驱动。解决办法:需要自行打包驱动到对应的ESXI版本中ESXi-Customizer定制ESXI网卡驱动:https://blog.whsir.com/post-3359.htmlESXi6.7物理机安装之网卡驱动封装:https://blog.whsir.com/post-3377.html怎么查询当前网卡,就不用过多说明了吧,如果当前机器是一台linux主机可以lspci_no network adapters

图像处理和计算机视觉中的经典论文(部分)_论文阅读 图像处理csdn-程序员宅基地

文章浏览阅读1.3k次。本文转载自:xdyang的图像视觉小屋http://blog.csdn.net/dcraw/article/details/7367990,非常感谢!!自己视野狭小,不敢说全部,只是把自己熟悉的方向中的部分经典文章列出来了。经典的论文,读得怎么透都不过分。有人说关于配准的文章太多了,其实我也不太关注这方面,不过由于它们引用率都比较高,就都列出来了,不过在zip包里一篇都没有。不_论文阅读 图像处理csdn

LeNet、AlexNet、GoogLeNet、VGG、ResNetInception-ResNet-v2、FractalNet、DenseNet_伯克利大学evan shelhamer等人利用已有深度学习模型(alexnet、vgg、google-程序员宅基地

文章浏览阅读1.8w次,点赞3次,收藏37次。2006年Hinton他们的Science Paper再次引起人工神经网络的热潮,当时提到,2006年虽然Deep Learning的概念被提出来了,但是学术界的大家还是表示不服。当时有流传的段子是Hinton的学生在台上讲paper时,台下的机器学习大牛们不屑一顾,质问你们的东西有理论推导吗?有数学基础吗?搞得过SVM之类吗?回头来看,就算是真的,大牛们也确实不算无理取闹,是骡子是马拉出来遛遛,_伯克利大学evan shelhamer等人利用已有深度学习模型(alexnet、vgg、googlenet),通

javascript函数柯里化及应用-程序员宅基地

文章浏览阅读95次。柯里化是把接受多个参数的函数变换成接受一个单一参数的函数,并且返回一个新函数,这个新函数能够接受原函数的参数。下面可以通过例子来帮助理解。function adder(num) { return function(x) { return num + x; }}var add5 = adder(5);var add6 = adder(6);print(add5(1...