文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端学习(13)~css学习(七)：浮动

（2）高矮不齐，底边对齐： ? （3）自动换行，一行写不满，换行写。 行内元素和块级元素 学习的初期，我们就要知道，标准文档流等级森严。...现在，从CSS的角度讲，CSS的分类和上面的很像，就p不一样： 行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。...办法是：移民！脱离标准流！ css中一共有三种手段，使一个元素脱离标准文档流： （1）浮动 （2）绝对定位 （3）固定定位 浮动的性质 浮动是css里面布局用的最多的属性。...证明1： ? 证明2： ? 上图中，span标签在标准流中，是不能设置宽高的（因为是行内元素）。但是，一旦设置为浮动之后，即使不转成块级元素，也能够设置宽高了。...所以能够证明一件事：一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。所有标签，浮动之后，已经不区分行内、块级了。

92510

我不知道你知不知道但前端NEXT知道的伪元素小技巧

伪元素和伪类一样，添加到选择器，但是不是描述状态，他允许我们为元素某些部分设置样式；利用伪元素，我们可以简化页面的html标签，同时用起来也很方便，善于使用伪元素可以让你的页面更加地简洁优雅。...方法：把父容器的高度撑起来，考虑到浮动了的元素并没有脱离正常文档流，而其它元素会围绕着它环绕，所以清除浮动简单有效的办法就是让环绕的元素不可环绕，把它变成一把尺子，放在最后面，把所有浮动的元素顶起来，而这把尺子就是一个设置了...没有用到一行js代码，你可以试一试;这个主要是结合:checked和counter，用before/after纯CSS实现的，这种纯粹是炫技； 4.平行四边形 有没有办法只让容器的形状倾斜而保持其内容不变呢...但是意味着我们不得不使用一层额外的HTML元素包裹内容.有些累赘 解决方案：伪元素，把样式应用到伪元素上，对伪元素进行变形，再把伪元素定位+层级放到到住宿元素下面 5....那么为什么使用了 :after 伪元素之后就可以实现对齐了呢？

1K70
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    【CSS】清除浮动 ③ ( 清除浮动 - 使用 after 伪元素 | 语法简介 | 兼容低版本浏览器 | 原理分析 )

    文章目录 一、清除浮动 - 使用 after 伪元素 ( 最流行写法 ) 1、额外标签法 和 overflow 样式法弊端 2、after 伪元素清除浮动简介 3、after 伪元素清除浮动核心代码...4、after 伪元素清除浮动原理分析 二、使用 after 伪元素 - 代码示例 一、清除浮动 - 使用 after 伪元素 ( 最流行写法 ) ---- 1、额外标签法 和 overflow 样式法弊端...清除浮动的方法 , 使用 after 伪元素清除浮动 ; 2、after 伪元素清除浮动简介 在 CSS 样式最上面 , 声明 清除浮动元素样式 , 将选择器设置为 .clearfix:after ,..., 不会改变标签的结构 , 也不会出现隐藏移除元素的问题 ; 3、after 伪元素清除浮动核心代码 核心代码示例 : CSS 样式代码 : /* 清除浮动 - 使用 after 伪元素 ( 最流行写法...父容器 盒子的末尾 , 相当于添加了一个 空盒子 , 类似于额外标签法 ; 这种使用 CSS 添加新标签的方式 , 在 标签结构中不可见 , 没有影响到 HTML 标签的结构 ; 二、使用 after

    91220

    巧用浮动布局、解决高度塌陷实例分享|技术创作特训营第一期

    浮动元素的特性包括：浮动元素会脱离标准流(脱标)。浮动的元素会一行内显示并且元素顶部对齐。浮动的元素会具有行内块元素的特性。...overflow: hidden 是一个 CSS 属性，用于控制元素的内容是否超出其容器的边界。它可以清除浮动，但前提是浮动发生在该元素内部。...当一个元素包含浮动时，如果不使用 clearfix 方法或其他技术来清除浮动，可能会导致父元素高度塌陷。为了解决这个问题，可以在父元素上设置 overflow: hidden,这样就可以清除浮动了。...其实每个属性都有使用的场景，本来想的是用flex布局和js动态判断解决的，后面用浮动3句代码就轻松解决了！...图片【选题思路】实际项目中遇到的一个问题，用js加css结合就可以实现，有没有更好的解决途径呢？回顾纯css找到了最优解，分享给大家，获取还会有更简洁的写法。

    23911

    css面试点三：清除浮动的九中方法-高度塌陷理解-伪元素使用

    浮动的定义 使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。 浮动的框可以左右移动，直到遇到另一个浮动框或者遇到它外边缘的包含框。...浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局 当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。 为什么要清除浮动？...清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题。 当父元素不给高度的时候，内部元素不浮动时会撑开，而浮动的时候，父元素变成一条线。...高度塌陷 如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候。...内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素 原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

    96920

    前端学习笔记之CSS浮动浅析

    看小菜定论： 对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。        怎么理解呢？...就拿上边的例子来说，我们是想让div2移动，但我们却是在div1元素的CSS样式中使用了清除浮动，试图通过清除div1右边的浮动元素(clear:right;)来强迫div2下移，这是不可行的，因为这个清除浮动是在...根据小菜定论，要想让div2下移，就必须在div2的CSS样式中使用浮动。...本例中div2的左边有浮动元素div1，因此只要在div2的CSS样式中使用clear:left;来指定div2元素左边不允许出现浮动元素，这样div2就被迫下移一行。 ?       ...可以看出div2的右边有一个浮动元素div1，那么我们可以在div2的CSS样式中使用clear:right;来指定div2的右边不允许出现浮动元素，这样div2就被迫下移一行，排到div1下边。

    1K30

    CSS 基础系列：inline-blcok和float

    1.比对： 简单比对一下div+css布局中的inline-block和float的特点，同时附上使用inline-block之后元素之间产生空隙的解决方法。...假如使用的是float，我们是没办法使div1位于div2的中间位置的。 空隙（Whitespace）： inline-block包含html空白节点。...如果你的html中一系列元素每个元素之间都换行了，当你对这些元素设置inline-block时，这些元素之间就会出现空隙。而浮动元素会忽略空白节点，互相紧贴。...通常来说，当你需要控制元素的垂直对齐跟水平排列时，使用inline-block；当你需要让元素环绕某一个元素时，或者需要支持旧版本ie，或者不想处理inline-block带来的空隙问题时，使用浮动。...这时还有一个办法：在父容器上使用font-size:0。

    76110

    CSS-浮动(float)

    浮动的特性 浮动的元素的对齐 浮动的元素排列位置 为什么要清除浮动 清除浮动本质 清除浮动的方法 使用after伪元素清除浮动 # CSS 布局的三种机制 网页布局的核心——就是用 CSS 来摆放盒子。...# 为什么需要浮动？ 盒子一行显示 盒子的左右对齐 # 什么是浮动？ 元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。...> 结果 # 浮动的元素的对齐 浮动首先创建包含块的概念（包裹）,总是找理它最近的父级元素,但是不会超出内边距的范围。...# 浮动的元素排列位置 浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。...（清除右侧浮动的影响） both 同时清除左右两侧浮动的影响 # 使用after伪元素清除浮动 :after 方式为空元素的升级版，好处是不用单独加标签了 使用方法： .clearfix:after

    2.2K20

    CSS

    ....此处写CSS样式 3·导入式 　　　　将一个独立的CSS文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，标记也是写在标记中...对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。 怎么理解呢？...就拿上边的例子来说，我们是想让div2移动，但我们却是在div1元素的CSS样式中使用了清除浮动，试图通过清除div1右边的浮动元素(clear:right;)来强迫div2下移，这是不可行的，因为这个清除浮动是在...根据小菜定论，要想让div2下移，就必须在div2的CSS样式中使用浮动。...本例中div2的左边有浮动元素div1，因此只要在div2的CSS样式中使用clear:left;来指定div2元素左边不允许出现浮动元素，这样div2就被迫下移一行。 ?

    2K30

    【CSS】课程网站 网格商品展示 模块制作 ③ ( 清除浮动需求 | 没有设置高度的盒子且内部设置了浮动 | 使用双伪元素清除浮动 )

    , 但不会影响到后续的页面布局 ; 上述模型中 , 没有设置高度 , 并且设置了浮动 , 如果不清除浮动 , 后续排列都会出现问题 ; 参考 【CSS】清除浮动 ③ ( 清除浮动 - 使用 after...伪元素 | 语法简介 | 兼容低版本浏览器 | 原理分析 ) 【CSS】清除浮动 ④ ( 清除浮动 - 使用双伪元素清除浮动 | 代码示例 ) 博客清除浮动 ; 使用 /* 清除浮动 - 使用双伪元素清除浮动...; 清除浮动时 , 给要清除浮动的 父容器 , 设置 clearfix 样式 ; 二、清除浮动代码示例 ---- 首先 , 在 CSS 样式中 , 定义 使用双伪元素清除浮动 的样式 ; /* 清除浮动...- 使用双伪元素清除浮动 */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after...{ clear: both; } .clearfix { *zoom: 1; } 然后 , 在 HTML 标签结构中 , 标签的上一层父容器中 , 设置清除浮动 ; <!

    1.1K20

    CSS基础

    文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，标记也是写在标记中，使用的语法如下：     1 2 3 4 5 css">...1.要给居中的元素一个宽度，否者无效。 2.该元素一定不能浮动，否者无效。 3 在HTML中使用标签，需考虑好整体构架，否者全部元素都会居中的。...> 非完全脱离文档流  左右结构div盒子重叠现象，一般是由于相邻两个DIV一个使用浮动一个没有使用浮动。...> >>>>解决方法：要么都不使用浮动；要么都使用float浮动；要么对没有使用float浮动的DIV设置margin样式。...3、clear:both:对自己起作用，加载时判断左右两边有没有浮动元素，如div2加了此属性，其后面有div3，其实和clear:left作用差不多，因为加载div2时即判断两边有没有浮动元素，此时div3

    2.1K70

    The Mystery Of The CSS Float Property

    根元素(html>)不能浮起来。 一个浮动起来的inline元素 会被转化为 块元素。...所有没有浮起来的块元素都有类似的行为。 p元素内的文本是inline元素，所以文本会围绕浮动元素。浮动元素之所以有外边距，是想让它偏离p元素：使得p元素忽略浮动元素在视觉上更清晰。...清除浮动 - Clearing Floats 使用浮动所带来的布局问题 可以通过 使用CSS的clear属性 来解决，这可以让你清除某个元素 左侧的或者右侧的 浮动元素。...只需要在父容器的下面添加一个额外的元素，并清除它。下面是 使用该方法后 html的样子： !...解决方案3：after伪元素 - SOLUTION 3: THE :AFTER PSEUDO-ELEMENT :after伪元素给HTML页面添加了一个元素。这个方法经常被用来解决清除浮动的问题。

    1.7K20

    我不知道你知不知道我知道的伪元素小技巧

    伪元素和伪类一样，添加到选择器，但是不是描述状态，他允许我们为元素某些部分设置样式；利用伪元素，我们可以简化页面的html标签，同时用起来也很方便，善于使用伪元素可以让你的页面更加地简洁优雅。...方法：把父容器的高度撑起来，考虑到浮动了的元素并没有脱离正常文档流，而其它元素会围绕着它环绕，所以清除浮动简单有效的办法就是让环绕的元素不可环绕，把它变成一把尺子，放在最后面，把所有浮动的元素顶起来，而这把尺子就是一个设置了...没有用到一行js代码，你可以试一试;这个主要是结合:checked和counter，用before/after纯CSS实现的，这种纯粹是炫技； 4.平行四边形 有没有办法只让容器的形状倾斜而保持其内容不变呢...但是意味着我们不得不使用一层额外的HTML元素包裹内容.有些累赘 解决方案：伪元素，把样式应用到伪元素上，对伪元素进行变形，再把伪元素定位+层级放到到住宿元素下面 光说不练，假把式试一试 5....那么为什么使用了 :after 伪元素之后就可以实现对齐了呢？

    99220

    web前端学习摘要。

    CSS：float浮动属性 作用：将页面元素浮动起来，使其能够向左或者向右排列；应用：实现页面中布局的左右排版，实现图文环绕的版式效果。...对齐方式（不管元素如何浮动，始终以父级容器或它前面同层次并列的元素作为参考进行对齐。    2. 一旦元素浮动起来，就可以直接适用CSS盒子模型属性。...CSS：clear清除浮动 作用：规定某个元素的某一侧不允许存在浮动元素。 应用 ：清除其他浮动元素对其产生的影响。 原理：设置了clear的元素将不再像前一个浮动元素对齐，换行重新开始。...A：如果父元素只包含浮动元素，那么在未设置高度的同时，则父元素高度坍塌为零。 解决“塌陷”的办法： step 1. 创建一个用来清除浮动的CSS样式类（.clearfix） step 2....3.弹性布局（flexbox） 响应式布局中的一种，为了实现响应式布局，CSS3提供的一种最新布局模式。提供更加高效的方式来对布局容器的子元素进行排列、对齐和分配空白空间。 PC站常见布局 1.

    3.7K30

    【CSS】使用绝对定位 浮动解决外边距塌陷问题 ( 为父容器 子元素设置内边距 边框 | 为子元素设置浮动 | 为子元素设置绝对定位 )

    > 展示效果 : 二、传统方法解决外边距塌陷 - 为父容器 / 子元素设置内边距 / 边框 ---- 这里使用传统方法 : 为 父容器 / 子元素 设置 内边距 / 边框 ; 下面是 为父容器设置 1...> 展示效果 : 三、使用浮动解决外边距塌陷 - 为子元素设置浮动 ---- 为子元素设置浮动 , 可以解决 外边距 塌陷问题 ; 代码示例 : <!...padding: 1px;*/ } .son { /* 为子元素设置浮动 解决外边距塌陷问题 */ float: left; width: 200px; height:...> 执行结果 : 四、使用绝对定位解决外边距塌陷 - 为子元素设置绝对定位 ---- 为子元素设置绝对定位 , 可以解决 外边距 塌陷问题 ; 代码示例 : <!...: absolute; /* 为子元素设置浮动 解决外边距塌陷问题 */ /*float: left;*/ width: 200px; height: 200px; background-color

    1.4K20

    【CSS】图片底部空白缝隙处理 ( 使用居中对齐 顶部对齐 底部对齐 | 将行内元素 行内块元素转为块级元素 )

    一、图片底部空白缝隙问题 在上一篇博客中 , 使用默认的基线对齐 , 会发现 行内块级元素 中的 图片与文字 默认的对齐方式下 , 图片下方有一条缝隙 ; 出现这条缝隙的原因就是 图片的底部 与...文字的基线对齐 , 上面图片与边框之间的风险 , 就是基线与底线之间的距离 ; 二、图片底部空白缝隙问题解决方案一 ( 使用居中对齐 / 顶部对齐 / 底部对齐 ) ---- 使用 vertical-align...DOCTYPE html> html lang="en"> vertical-align 垂直对齐示例...图片底部有一块缝隙 , 其它三种对齐方式底部都没有缝隙 ; 三、图片底部空白缝隙问题解决方案二 ( 将行内元素 / 行内块元素转为块级元素 ) ---- 使用 vertical-align 垂直对齐...方式 的前提是 作用对象必须是 行内元素 / 行内块元素 , 如果作用对象不是上述元素 , 则垂直对齐不生效 , 也就是基线对齐不生效 ; 代码示例 : <!

    2.1K50
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券