【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

智能推荐

2023CCF中国开源大会丨开源供应链安全技术分论坛_程华 军科院-程序员宅基地

文章浏览阅读447次。2023 CCF 中国开源大会即将于10月21日-22日于湖南长沙举行,将举办近20场领域平行分论坛。由王千祥作为主席的开源供应链安全技术分论坛邀请您共同分享经验和见解,共同探索开源领域的无限未来!_程华 军科院

html文件引入其它html文件的几种方法:include方式-程序员宅基地

文章浏览阅读1.2k次。  可以在一个html的文件当中读取另一个html文件的内容吗?答案是确定的,而且方法不只一种,在以前我只会使用iframe来引用,后来发现了另外的几种方法,那今天就总结这几种方法让大家参考一下。  1.IFrame引入    a.html引入b.html的内容    <iframe name="content_iframe" marginwidth=0 marg..._引入html include

JAVA语言遗漏_java语音包 漏字-程序员宅基地

文章浏览阅读266次。IS-A关系:public class Animal{}public class Mammal extends Animal{}public class Reptile extends Animal{}public class Dog extends Mammal{}基于上面的例子,以下说法是正确的:Animal类是Mammal类的父类。Anim_java语音包 漏字

高速串行总线系列(2)高速串行总线技术总览_cml和pcie-程序员宅基地

文章浏览阅读881次。文章目录嵌入式高速串行总线技术应用对比SRIO总线JESD204总线PCIESATA总线AuroraFC标准VPX架构嵌入式高速串行总线技术应用对比SRIO总..._cml和pcie

DML编程控制_global-config.db-config.id-type=assign_id-程序员宅基地

文章浏览阅读332次。MP会默认将模型类的类名名首字母小写作为表名使用,假如数据库表的名称都以tbl_开头,那么我们就需要将所有的模型类上添加。这种生成策略,不需要手动设置ID,如果手动设置ID,则会使用自己设置的值。AUTO的作用是使用数据库ID自增,在使用该策略的时候一定要确保对应的数据库表设置了ID主键自增,否则无效。可想而知,MP的逻辑删除会将所有的查询都添加一个未被删除的条件,也就是已经被删除的数据是不应该被查询出来的。设置表的前缀内容,这样MP就会拿 tbl_加上模型类的首字母小写,就刚好组装成数据库的表名。_global-config.db-config.id-type=assign_id

Introduction to Rotary Cement Wet Kilns-程序员宅基地

文章浏览阅读70次。Most Portland cement is produced in a rotary kiln. Basically, this can be a long cylinder rotating about its axis once every single minute or two. The axis is inclined at a slight angle, the end using..._new machines to produce cement

随便推点

ubuntu系统无法连接蓝牙设备_ubuntu蓝牙连不上-程序员宅基地

文章浏览阅读707次,点赞11次,收藏8次。选择需要连接的设备,右键点击连接,信任即可。直接点击 blueman。_ubuntu蓝牙连不上

Android Action Bar 详解篇_android actionbar使用场景-程序员宅基地

文章浏览阅读373次。作为Android 3.0之后引入的新的对象,ActionBar可以说是一个方便快捷的导航神器。它可以作为活动的标题,突出活动的一些关键操作(如“搜索”、“创建”、“共享”等)、作为菜单的灵活使用,还可以实现类似TabWidget的标签功能以及下拉导航的功能,系统能够很好根据不同的屏幕配置来适应ActionBar的外观,配合起Fragemtn可谓是十分强大。 那么,对于今_android actionbar使用场景

python爬虫图片加速_Python爬虫加速神器的小试-程序员宅基地

文章浏览阅读134次。大名鼎鼎的aiohttp,相信如果你学习Python或者爬虫的时候,肯定听说过这个东西。没听过也不要紧,今天看完文章,只要记住,aiohttp这个东西,在写爬虫的时候,很牛逼就行了。aiohttp 就是一个用 asyncio实现的 HTTP client/server。 你可以通过它来简单实现一个具有异步处理功能的 clients 和 servers。 aiohttp同时还支持 Server We..._python 加速图片下载

eclipse处理get请求得前端中文乱码_eclipse 普通 get请求中文乱码-程序员宅基地

文章浏览阅读459次。我这个方法是将所有的地方都改成utf-8不单单是能解决前端问题第一:去博主这改一下eclipse编码配置https://blog.csdn.net/lanmuhhh2015/article/details/79366872第二:然后再 servlet中doget请求中加上response.setContentType("text/html;charset=utf-8");第三:去你to..._eclipse 普通 get请求中文乱码

Hadoop-02_yapoopg-02-程序员宅基地

文章浏览阅读98次。1、Hadoop HDFS:一个高可靠、高吞吐量的分布式文件系统。Hadoop MapReduce:一个分布式的离线并行计算框架。(分布式和集群,想想)2、hadoop的apache 和 cloudera公司目录结构apache目录结构: bin : 对集群操作的命令 hdfs dfs和hadoop fs sbin: 对集群的启动和关闭的命令 etc/hadoop/ : hadoo..._yapoopg-02

上海毅速:3D打印正在为模具行业深度赋能-程序员宅基地

文章浏览阅读307次。模温是影响模具生产效率和产品品质的关键因素,传统的冷却水路设计受限于加工技术,往往只能制成直线型,与产品之间的距离较远且分布不均,导致冷却效果不佳。而3D打印随形水路技术则能打破这一局限,打印出的水路可以具有任意结构形状和截面形状,实现水路与产品之间距离的最小化和最均匀分布,从而达到最优的冷却效果。在模具制造领域,3D打印随形水路制在模具领域的应用越来越多,随形水路不仅能有效缩短注塑周期,还能解决因冷却不均匀、模具温度过高等导致的品质问题。3D打印技术的核心原理在于离散、堆积与成型。