css4浮动+清除浮动

已于 2024-02-21 15:04:52 修改
阅读量982 收藏 7
点赞数 11
分类专栏： css 文章标签： 前端 javascript 开发语言 css
于 2024-02-21 15:04:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ldd_eb/article/details/136211395
版权

浮动

一.常见网页布局

1.三种布局方式

标准流/普通流/文档流
浮动
定位

2.布局准则

在这里插入图片描述
在这里插入图片描述

二.浮动（float）

1.好处

普通流盒子中间默认有空隙且不知道空隙大小，有些布局普通流做不到，浮动可以方便控制盒子间的空隙

2.概念

在这里插入图片描述

3.三大特性

（1）脱标
在这里插入图片描述
（2）一行内显示且顶端对齐
在这里插入图片描述
（3）具有行内块特征
在这里插入图片描述
在这里插入图片描述

4.使用

在这里插入图片描述

5.常见网页布局模板

在这里插入图片描述
在这里插入图片描述

6.注意点

在这里插入图片描述

三.清除浮动

1.why

在这里插入图片描述

2.本质

在这里插入图片描述

3.语法

在这里插入图片描述

应用
在这里插入图片描述

4.四种way（后三个都是给父级添加）

（1）额外标签法（空标签必须是块级元素）
在这里插入图片描述
在这里插入图片描述

（2）overflow

在这里插入图片描述

（3）：after伪元素发（复制调用）
在这里插入图片描述

（4）双伪元素（复制调用）
在这里插入图片描述

清除浮动总结

在这里插入图片描述

ldd_eb
关注
  • 11
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css4中文API
04-08
css4.0中文参考手册，开发学习都可以用，推荐下载，请多多支持
DIV+CSS 清除浮动常用方法总结
09-24
下面小编就为大家带来一篇DIV+CSS 清除浮动常用方法总结。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
day 9/17 css盒子模型下和浮动
rxx__的博客
09-17 324
content宽度和高度 使用宽度属性width和高度属性height可以对盒子的大小进行控制。 width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。 大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是： /*外盒尺寸计算（元素空间尺寸）*/ Element空间高度 ...
css-4
Hunter_LIFE的博客
02-28 228
列表 list-style:none; 去除标志  disc square circle 浮动 让元素脱离文档流 让块级元素在同行中显示 float:left; float:right; 改变的是z轴  清除浮动 (1)在浮动元素后清除  clear:left;  right;  both; (2)给浮动元素的父级固定高度（块级元素独占一行） (3)给父级元素(heig
【CSS4】
最新发布
qq_53450254的博客
09-24 167
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。选择器 { float: 属性值;
CSS(4)
John_boom的博客
09-06 738
行高和字号行高CSS中，所有的行，都有行高。盒模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。line-height: 40px; 文字，是在自己的行里面居中的。比如，现在文字字号14px，行高是24px。那么： 为了严格保证字在行里面居中，我们的工程师有一个约定： 行高、字号，一般都是偶数。这样，它们的差，就是偶数，就能够被2整除。单行文本垂直居中文本在行里面居中 公
html+css 清除浮动的相关技巧心得
09-24
这是最简单的清除浮动方式，通过在父级元素CSS中设定一个固定的`height`值来确保包含所有浮动元素。但这方法的局限性在于，如果内容高度不确定或者超过预设高度，会导致溢出。 2. **结尾处添加空div并设置`clear:...
CSS 清除浮动元素方法 整理
09-25
在网页设计中，CSS（层叠样式表）是用于控制网页元素布局和样式的语言。浮动布局是一种常见的CSS技术，它允许元素在页面上左右...然而，在向后兼容性和老式浏览器的支持方面，浮动和清除浮动仍然是一个重要的CSS概念。
浅谈css中浮动和清除浮动带来的影响
09-27
为了解决这些问题，CSS提供了多种清除浮动的方法： 1. **隔墙法**（clearfix）：在需要清除浮动的元素前添加一个无内容的空元素，如`<div class="clearfix"></div>`，并为`.clearfix`类设置样式`clear: both;`。...
CSS 清除浮动方法大全
09-25
CSS 清除浮动是网页布局中至关重要的一个概念，主要是为了解决元素浮动后对其周围元素产生的影响，防止内容被浮动元素覆盖或布局混乱。浮动元素通常用于创建多列布局，但如果不进行适当的清除，可能会导致父元素高度...
CSS4.0中文参考手册.zip
05-09
CSS4.0中文参考手册。CHM格式，不用安装阅读软件，可以直接打开，而且如果你要学习CSS的话，它可是你必不缺少的查询手册。
【译】下一代选择器：CSS4
weixin_34007020的博客
06-15 220
2014年1月，我写了一篇文章：The Current Generation of CSS3 Selectors，这篇文章的目的是介绍一些CSS3中新增的选择器。文中的选择器已经有了很多文档，并且也被大多数浏览器支持（包括IE9+）。 由于Selectors Level 4 specification 目前已是工作草案状态，并且Edit...
CSS-4（样式表分类）
m0_56147997的博客
03-10 349
下面讲一下CSS三个类型样式表的使用方法以及场景
css4（不写3怕误会，浮动好难啊~~~）
u013556505的专栏
01-20 422
浮动：元素加了浮动，会脱离文档流（是文档中可显示对象在排列时所占用的位置），按照指定的一个方向移动直到碰到父级的边界或者另一个浮动元素停止 1使块元素在一行显示 2使内嵌支持宽高 3不设置宽高的时候自动撑开 4脱离文档流 5提升层级半层（一个div是浮动的，另一个是不浮动的，另一个div里面的内容会被挤下来） clear：left right both none元素的某个方向不
CSS世界已经有了CSS2和CSS3，那会有CSS4吗？
m0_68997646的博客
01-23 2898
CSS世界已经有了CSS2和CSS3，那会有CSS4吗？
CSS(4)基础
m0_56970433的博客
04-14 674
less less是一门css的预处理语言 less是一个css的增强版，通过less可以编写更少的代码以实现更强大的样式 在less中添加了许多的新特性，相对变量的支持，对mixin的支持 less的语法与css大体一致，但是css中添加了许多对css的扩展 所以浏览器无法直接执行less代码，需将less转为css，然后由浏览器执行 <style> html{ --color:yellow;--lengt...
CSS4笔记
m0_66506641的博客
02-05 352
一.字体族 字体相关的样式 color用来设置字体颜色 font-size字体的大小 和font-size相关的单位 em相当于当前元素的一个font-size rem相对于根元素的一个font-size font-family字体族(字体的格式) 可选值： serif衬线字体 sans-serif非衬线字体 monospace等宽字体 指定字体的类别，浏览器会自动使用该类别下的字体 font-family可以同时指定多个字体，多个字体间使用,隔开字体生效时优先使用第一个，第一个无法使...
CSS4 选择器
精彩人生
10-29 462
来源：http://sofish.de/1886 CSS3 还没完全用上，CSS4 已经提上日程。官方发布了 update to the working Selectors Level 4 spec，对选择器做了一些升级。前端最大的优点就是技术更新快，可以经常学到新东西；最大的缺点也是技术更新快，要跟上潮流还真不是那么简单。不过，这次更新有像“父选择器”这样让人兴奋的内容，让我们
HTML+CSS(4)
Burgdan的博客
09-28 563
表单： 表单在网页中主要负责数据采集功能。 一个表单有三个基本组成部分：  表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。  表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。  表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理
css清除浮动的作用
07-28
\[1\]清除浮动的方法有多种，可以使用带clear属性的空元素，在浮动元素后使用一个空元素，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。也可以使用AFTER伪元素，通过父元素的::after伪元素来生成浮动元素的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值