学会css php,CSS 浮动

左手的ㄟ右手 2023-01-18 15:25 145阅读 0赞

这里涉及到的属性就是 float,其值可以赋值为:

left:元素向左浮动

right:元素向右浮动

none:不浮动

inherit:从父级继承浮动的属性

还有一个就 clear 属性:

主要用于去掉向各方向的浮动属性(包括继承来的属性)

下面我们就先创建一个最基础 html 和 CSS 文件,下面是基础内容:

html:

CSS.qd\{    width: 100px;    height: 100px;    background-color: lightskyblue;

\}.wd\{    width: 100px;    height: 100px;    background-color: lightseagreen;

\}.ed\{    width: 100px;    height: 100px;    background-color: lightsalmon;

\}

下面是显示效果:

![33f0b23ed0efb185979adc23db09d376.png][]

在这个基础上我们他们全加上 float 属性,前两个往左,后一个向右,看看会有什么效果:float: left;float: right;

效果图

![fc62adb13647cda10c5ed3f54330cecd.png][]

就像几个小东西在一个房间里面跑,你可以规定它跑的方向,他们会跑到边框为止,为了测试,我们不妨来限定一个空间给它们(将这三个 div 全放到一个 div 中).就像这样:

接下来你就会看见:

![a5d340b8ed139376a0d42ae377964a2d.png][]

但是有时我们不需要浮动,就像下面这样,我们想在上面效果下面加上一句话,然后我们就直接加入了一个

hello php

在 container 中.然后我们会看见

![3fad09b53bf8096f5188771c56c04119.png][]

这说明,这个 div 也继承了浮动的属性,要想让字体到下面去,我么就必须取消字体 div 浮动.那么我们就在 CSS 中添加如下如下内容:.text\{    clear: both;

\}

效果图:

![4106a58014cec9a252865f2e99db0a63.png][]

[33f0b23ed0efb185979adc23db09d376.png]: /images/20221021/6918500bd64646709969ed00650bf7cd.png
[fc62adb13647cda10c5ed3f54330cecd.png]: /images/20221021/04e4525de3d241cca98bdf29fcd24e4d.png
[a5d340b8ed139376a0d42ae377964a2d.png]: /images/20221021/adf5f77a10a345c0beca49cfe9eac504.png
[3fad09b53bf8096f5188771c56c04119.png]: /images/20221021/b8e974124687407cb2d6b2026d980f81.png
[4106a58014cec9a252865f2e99db0a63.png]: /images/20221021/9e563d73b5584ae398070954c6bd270f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，145人围观）

还没有评论，来说两句吧...

相关阅读

相关 css浮动

文章目录 1.其他样式 1.1 圆角边框 1.2 盒子阴影 1.3 文字阴影 2

迈不过友情╰/ 2024年03月17日 17:25/ 0 赞/ 54 阅读

相关 CSS浮动

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

淡淡的烟草味﹌/ 2023年07月09日 08:29/ 0 赞/ 125 阅读

相关学会css php,CSS 浮动

这里涉及到的属性就是 float,其值可以赋值为: left:元素向左浮动 right:元素向右浮动 none:不浮动 inherit:从父级继承浮动的属性还有一个

左手的ㄟ右手/ 2023年01月18日 15:25/ 0 赞/ 146 阅读

相关 CSS浮动以及清除浮动float

float设定浮动 > 浮动的元素脱离标准流（文档流），相当于飘浮起来了，会释放原先占有的位置，位置不再保留，浮动的元素都具有行内块元素的特性，浮动的盒子只会影响后面的标

女爷i/ 2023年01月18日 06:38/ 0 赞/ 156 阅读

相关 CSS浮动

浮动元素脱离文档流使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。 <pre style=

旧城等待，/ 2023年01月10日 10:21/ 0 赞/ 205 阅读

相关 [CSS]闭合浮动（清除浮动）clearfix

一、为什么要闭合浮动（清除浮动）一个父元素中有三个子元素（分别为黑粉紫色）父元素有分别为红色和蓝色的上下边框 ![在这里插入图片描述][202008101756

清疚/ 2022年11月26日 06:53/ 0 赞/ 208 阅读

相关 CSS浮动——浮动的特性、清除浮动

CSS浮动一个页面基本包含了三种布局方式：标准流、浮动和定位浮动（float）浮动可以改变元素标签默认的排列方式，最典型的是可以让多个块级元素一行内排列显示

一时失言乱红尘/ 2022年11月22日 12:52/ 0 赞/ 272 阅读

相关 CSS-浮动

1.浮动(float)的基础知识 float:left;向左浮动 float:right;向右浮动 float:none;元素不浮动 float:inherit

绝地灬酷狼/ 2022年05月03日 03:28/ 0 赞/ 301 阅读

相关 css学习_css浮动

1、文档流介绍网页布局的核心就是利用css来摆放盒子，把盒子摆放在合适的位置。 css的定位机制有以下3种（网页布局一般需要3种搭配使用）： a、普通流（标准流）

水深无声/ 2021年12月20日 01:59/ 0 赞/ 383 阅读

相关 css浮动

css浮动和清除浮动在写页面的过程中，浮动是大家经常用的属性，在好多的排版布局中都是用的浮动；定义：使元素脱离文档流，按照指定的方向移动，直到边缘碰到包含框或者另一个

男娘i/ 2021年11月02日 06:58/ 0 赞/ 419 阅读