我的第一篇博客--css 清除浮动

第一篇博客,请大家多多指教!

今天我浅谈对网页编写css中清除浮动几种方法,众所周知在网页编写中,在遇到内容左右布局时,我们必须要使用浮动才能使元素左右排列,而这时

当我们需在下面的网页中继续布局时,浮动就会给下面的元素带来影响,就需要使用清除浮动了。

清除浮动作为每一个Web前端必须掌握的技能,在逆战班学习中我想说说我对不同清除浮动方法的理解和使用方式,下面来介绍一下几种清除浮动的

方法:1.当解决上下排列的情况时,利用clear清除float,具体值为:right、left、both;我在使用中通常都是用both,因为它可以清除左右浮动影响,

相对而言比较方便,同时此方式只能给块元素增加,这点需要格外注意;

2.解决嵌套情况时:a.固定宽高,给父元素增加宽高可以避免给后面元素带来影响,但是我们知道,网页编写完成后后续还会根据变化改变网页内容,

这时宽高一旦固定影响自适应效应,修改维护会非常麻烦,因此逆战班老师不推荐我们使用;b.父元素浮动,这种会给后面的元素带来影响,也不推

荐;c.用BFC规范中overflow:hidden;,给父元素中加上,我们知道这种真正意义为溢出隐藏,当在网页编写中我们遇到需要子元素溢出显示出,这时

这种办法就无法满足我们的需求了;d.display:inline-block;与父元素浮动一样也会给后面的元素带来影响;e.设置空标签利用css样式中的clear:both清

除浮动,让父级div能自动获取到高度。缺点:网页中浮动元素用的比较频繁,利用此种方式确实可以解决问题,但代码中会多出很多标签,造成代码

冗余且影响美观,此种办法为以前主要清除浮动的使用方式,现在各大公司使用较少;f.给父元素div添加一个class,定义伪类:after{content:“”;

clear:both;display:block;},是目前推荐的使用方法,并且是各大公司主流解决清除浮动的办法,也是我在网页编写时css reset的固定写法,在

需要用到清除浮动时,只用父元素添加一个class类名就行。

以上就是我目前所掌握解决清除浮动的办法,只是我个人理解相信之中肯定有不足之处,大家可以互相交流,肯定会有更多浮动的解决方式,期待在

IT届向更多技术大牛学习。

原文地址:https://www.cnblogs.com/zhanglei154636/p/12349302.html

时间: 2024-10-12 05:43:42

我的第一篇博客--css 清除浮动的相关文章

我的第一篇博客 —— 用 js 和 css 简单实现瀑布流布局

一个拖延症晚期患者的自述: 注册了博客快一个月了,终于要迎来我的第一篇博客了哈哈哈!!! 刚注册的时候,满脑子要频繁更新,扩充自己的知识库,一到真正落实,就不得不为懒惰屈服,还好有了学习计划,以后应该会每周一更(不更当我没说).当然了,肯定是希望被更多人看到,帮助到大家,如果没人看的话就当作是自己的积累与记录吧! 还有,我目前工作是前端工程师,还是一名刚入行不久的菜鸟哈哈哈!!!现在主要目标是先把前端知识巩固好,再逐步往全栈领域发展(毕竟装13是我一生的职责). 所以,请各位大佬们多多指教,如果

第一篇博客——基于数组的优先队列(java版)

看过园子里和CSND上那么多大牛精彩的博客后,早就按捺不住想亲手写上几篇.奈何每次坐在电脑前准备敲字的时候,立马赶到浑身不自在,无从下手.实在是因为自高考之后,大学以来,本人几乎就再没动笔写过一篇文字,写作水平退化实在严重.今天鼓起勇气开始写作博客,一方面希望通过多写慢慢地找回写作的感觉,一方面也希望通过博客和大家多多交流,共同进步. 既然是第一次试手,就写个简单易懂的内容——优先队列. 话不多说,先上代码. 1 /** 2 * @author Mr Left 3 * @version 1.0

我的第一篇博客记录我的IOS生涯

这是我的第一篇博客,只为了记录我在IOS开发旅程中得成长之路,一直觉得能发表几百篇的都是大牛,一直都是我崇拜的对象,我希望现在的一小步能成为将来的一大步,坚持每天发表一篇博文,养成一个良好的每天学习新知识的习惯,希望多年以后点开这第一篇博客能感叹当初的自己是多么的幼稚,但也感谢当年的坚持!come on!活着就是为了改变世界!

第一篇博客:一个双色球游戏 、以及个人介绍

一.双色球小游戏 双色球类(6红1蓝): 1 package top.liaoyingpeng.bean; 2 3 import java.util.Arrays; 4 5 public class Balls { 6 private int[] red = new int[6]; 7 private int blue; 8 private BallBox makeBy; 9 10 // 全机器生成 11 protected Balls(BallBox bx) { 12 makeBy = bx;

第一篇博客,希望是一个好的开始

博客园"占座位" 因为学习专业的原因,经常浏览博客学习和解惑.在前辈们的作品中学到了很多,也感受到了很多.通过博客的方式去分享知识和记录自己的成长.这种积极向上的,乐于分享的精神,让我很受鼓舞.我时刻准备着加入这一大军的行列.于是我就注册了个账号,呵呵. 第一篇博客 经常会突发奇想的计划着怎么怎么样,却在行动的时候虎头蛇尾了,很难坚持作下去.这或许是很多人都存在的问题.在别人博客上看到:"或许写博客是一个不错的方法".通过博客,经常来记录一下自己的学习,分享一下自己

第一篇博客《import tensorflow的问题解决》

在jupyter notebook中死活无法import jupyter 搞了很久,最后是解决了,过程如下: 1)安装anaconda3 4.2.0版本 2)解决activate tensorflow问题 3)解决import tensorflow问题 以下就两个方面进行详细记录: 1)activate tensorflow失败问题 https://www.cnblogs.com/lvsling/p/8672404.html 根据以上文章操作,解决了激活tensorflow的问题,上述文章我是只

第一篇博客当测试,codeigniter遇到坑了

第一篇博客当测试,codeigniter遇到坑了,耽误了1天时间,才弄明白 如果你发现无论输入什么 URL 都只显示默认页面的话,那么可能是你的服务器不支持 PATH_INFO 变量,该变量用来提供搜索引擎友好的 URL . 解决这个问题的第一步是打开 application/config/config.php 文件, 找到 URI Protocol 信息,根据注释提示,该值可以有几种不同的设置方式, 你可以逐个尝试一下. 如果还是不起作用,你需要让 CodeIgniter 强制在你的 URL

Hello World —— 我的第一篇博客

2019.2.22,我开始写起了属于我的博客,没有什么花里胡哨的想法,目的很简单:就想将自己在学习过程中的每一阶段所学到的知识.所遇到的问题用文字的方式记录下来,方便以后回头看看的时候,能知道自己在这个行业里处于一个什么阶段.好了,废话不多说,第一篇博客,不谈技术,先聊聊自己的一些想法吧.我最喜欢的一件事就是在晚上,一个人静静地坐在那里,看着满天繁星,思考着自己的问题,那时候很安静,很孤独.不过我喜欢孤独.技术也是这样,学技术的道路是孤独,是寂寞的,你要靠你自己一点点提升,难受了你要靠你自己挺过

第一篇博客------致自己

我为什么在博客园开博? 2019年5月10日,我在博客园写下自己的第一篇博客,用以记录和促进自己的技术成长.同时也希望自己的记录能给需要的人带来点启示. 我的博客将由以下几个分类的文章组成: 编程语言:到目前为止开发主要用Java,涉猎Java.Python.JQuery.js等.这个分类将会分享一些编程过程中理解到的小trick.值得借鉴的代码等. Lunix操作:学号Lunix操作真的是会收益终身的事情,而且装逼属性Max.这个模块主要会分享一些Lunix相关的技巧. 数据库:数据库是开发过