专栏首页星尘的一个朋友float到底是干什么的?

float到底是干什么的?

写在前面

划重点 float的真正用途不是我们平时用于将同模块下的元素并行显示,也不是为了实现将元素放在某一特殊位置时使用! float正真的作用是!各位老爷可以去考证!float的真正作用是叫做:是元素具有包裹性,最直观的体现效果就是我们world里面常用文字环绕图片

但因为我们工作中需要达到自己想要的效果,使用float去实现,导致了float失去了原本的用途。同时float的使用不当,也给我们带来了很多的问题

float页面样式,如果是在已经有样式的页面撰写新的代码,出现位置出差,可能是因为之前页面样式浮动造成的, 这个时候可以在出错的div或者标签写上 <style="float:none"/> 即表示这个div或者标签取消浮动,保持当前浮动样式; css在处理浮动过程中,如果在浮动元素下方的元素定义了额外的样式,但不想受到上方浮动的影响,这个时 候可以使用 style=”clear:both;” 此方法定义的结果是取消全部样式,这里对去除浮动样式的影响比较适 用;

<style type="text/css"> .a {float:left} </style>
<div class="a">1</div>
<div class="a" style="float:none">2</div>
<div class="a">3</div>

<div style="float:left">1</div>
<div style="float:left;clear:right">2</div>
<div style="float:left">3</div>
</br>
<p>----------我是分割线-------------</p>
<div style="float:left">1</div>
<div style="float:left;clear:left">2</div>
<div style="float:left">3</div>
</br>
<p>----------我是分割线-------------</p>
<div style="float:left">1</div>
<div>2</div>
<div>3</div>
<div style="float:left">4</div>
<div>5</div>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Java 设计模式(九)《观察者模式》

    定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。

    星尘的一个朋友
  • 和 lvgo 一起学设计模式(二十)行为型之状态模式

    我刚开始看到这个模式的时候,没啥感觉,不知道这东西要说的是个啥,后来看了个案例,渐渐清楚了,这个模式本身还是比较简单的。

    星尘的一个朋友
  • 和 lvgo 一起学设计模式(十七)行为型之备忘录模式

    上面的代码是以这种类图方式实现的,不过这在 Java 中显然有可以优化的地方。即将 Caretaker 角色优化掉。优化后的类图

    星尘的一个朋友
  • javascript当中div在单行(float:left)用法

    div在单行(float:left) 例 1.2.1 divInOneLineIEFF.html <div style="width:100px"> ...

    马克java社区
  • 左右侧边栏固定宽,中间宽度自适应

    小蔚
  • CSS布局 -- 左侧定宽,右侧自适应

    书童小二
  • Vue.js学习笔记(2)

    程序员不务正业
  • CSS入门7-三大特性之继承特性

    (注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

    love丁酥酥
  • 一篇文章带你了解CSS基础知识和基本用法

    相信做过网页的对Css都不是很陌生,它可以帮助我们重铸网页中很多绚丽的特效,尤其是现在Css已经发展3.0版本,很多功能更是丰富多彩,让我们的开发时间不仅大大缩...

    前端皮皮
  • jquery获取元素到页面顶部的距离

    在前端开发过程中,经常会遇到要求滚动条滚动到某位置时某按钮固定在页面上,否则悬浮于页面上。这时就会用到获取需要固定在页面位置的元素距离页面顶部的距离,通过比较文...

    无邪Z

扫码关注云+社区

领取腾讯云代金券