首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

元素清除浮动(重要) 利用伪元素:after清除浮动

利用伪元素:after清除浮动 让页面呈现多列布局时经常会使用 float:left/right ,可是浮动布局会导致父元素的高度为0(未设置高度的情况下),不会根据子元素的高度而变化,另外,后面不需要浮动想在下一行显示的标签出现在浮动元素的后面...所以我们在使用浮动进行布局的时候会需要一个块级元素(行内元素无效)来设置 clear 属性,如果浮动元素下方本来就有元素,那我们可以直接对该元素设置 clear:both ,若没有其他元素需要展示,我们往往会写一个空白标签来清除浮动... 但是这样无疑会增加浏览器的渲染负担,所以考虑使用伪元素 :after 来代替这个空白标签,因为清除浮动需要在浮动元素后面,所以不可以使用...:before ,对 :after 设置 content:"" ,并使其 display:block 成为块级元素后 clear:both 来清除浮动: #content:after{content:"

3.1K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【原创】CSS中元素浮动以及清除元素浮动

    元素浮动,使元素并排显示 属性folat 属性值folat:left左对齐 属性值folat:right右对齐 浮动的作用:使元素并排显示,并且每个元素间没有间隔,脱离文档流 清除元素浮动...: 清除元素浮动的原因: 元素浮动后,会遮挡已经浮动的元素后边的元素位置,使浮动元素后边元素显示不全。...清除办法: 1.在浮动元素后,新建一个块级元素。...2.设置该块级元素属性clear 属性值:left 清除左浮动 属性值:right 清除右浮动 属性值:both 清除左右两边浮动(只要元素有浮动,无论左右两边浮动都可以清除...) 清除浮动后需要对清除浮动的块级元素进行优化 1.设置块级元素高度和字体尺寸为0px 2.设置块级元素visibility属性值为hidden

    63310

    js动态添加div

    准备好, 添加到内容div中的第一个 点击每行的添加 将div添加到当前点击行后面一个 点击每行删除 删除当前div 实现 基本思路很简单, 只要在每个点击按钮上添加对应的点击事件, 将结果封装成类....我在封装的时候喜欢先想用的时候怎么用, 然后根据这个思路来想应该怎么封装, 思考如下 因为添加的div肯定是不同的, 是需要传的参数, 但是如果直接传div字符串也太丑了, 应该在页面直接写HTML,...按照默认值来看, 一个参数都不需要 当前实现还很简陋, 代码放在码云上, 发现问题再更新, 下载后可以直接运行demo文件 https://gitee.com/hujingnb/addDivItem 下面是当前的简单实现...'] || 'content_div_id'; var exampleDivId = params['example_div_id'] || 'example_div_id'; var...this.addSuccessFunction(divItem, this.secp); // 序号迭代 this.secpIter(); // 条目+1 this.num++; }; // 向元素后面添加

    24.4K40

    P不能做div的父元素

    P和div同为块元素,为什么P不能做div的父元素? 执行结果: 可以在控制台看到这样一段信息: div像一条分割线一样,把无辜的 P标签 一分为二 是什么原因导致的呢?...W3C这样说:“ 如果你这样做,将会严重违反P的语义 ” 解决方法暂时没有 于是我找到了块级元素和内联元素的嵌套规则,如下: 最基本:内联不能嵌套块级,块级可以嵌套内联元素 .../span> 错误(内联嵌套块级) 有几个特殊的块级元素只能包含内嵌元素,不能再包含块级元素 这几个特殊的标签是:h1、h2、h3、h4、h5、h6、p、dt。...块级元素与块级元素并列、内联元素与内联元素并列   正确   正确   错误(块级和内联并列了,正确的写法如下)

    5100

    vscode下面开发vue.js项目

    2.然后在src下面的components目录(组件目录)下面新建一个Test.vue文件(文件首字母要大写)文件内容如下: ?...3.在router目录下面(路由跳转目录)下的index.js页面中添加,我们刚才添加的Test.vue页面的跳转路由。文件内如如下: ? 4.使用快捷键Ctrl+~键,就可以出现命令行输入页面。...根目录下面package.json文件是npm命令的集合文件,如下所示: ? 如果想要修改项目的端口地址的话,可以去config下面的index.js进行修改。如下所示: ?...这边需要说一下的是:项目的全局vue名字叫做Vue.vue、启动js文件是main.js ?如果大家对文章有什么问题或者疑意之类的,可以加我订阅号在上面留言,订阅号上面我会定期更新最新博客。

    1.7K40

    修改表单元素中placeholder属性样式、清除IE浏览器中input元素清除图标和眼睛图标

    一、修改input元素placeholder属性样式 在做项目的时候,一般表单元素的placeholder属性样式都是使用浏览器默认的,但有时候为了追求设计上的美感需要修表单元素的placeholder...可以通过下面的代码修改样式: /*Chrome、Safari等 webkit内核浏览器*/ ::-webkit-input-placeholder{ color:red; }...color:red; } /*IE、Edge等 Trident 内核浏览器*/ :-ms-input-placeholder{ color:red; } 二、清除...IE浏览器中input元素的删除和查看密码图标 在IE、Edge等 Trident 内核浏览器中,type = “text” 的 input元素中有输入时会出现清除图标,type = “password...添加下面的样式可以去除默认图标: ::-ms-clear, ::-ms-reveal{ display: none; }

    1.9K20
    领券