浮动html_css

短命女 2022-06-18 05:19 177阅读 0赞

<!DOCTYPE html>  
<html>  
 <head>  
  <meta charset="utf-8">  
  <title></title>  
  <style type="text/css">  
   \#box\{ background: \#06F;\}  
   .box01\{background: \#0F3;width: 800px; height: 200px;\}  
   .box02\{background: \#669;width: 500px; height: 300px;\}  
   .box03\{background: blueviolet;width:800px; height: 200px;\}  
   .box-fd\{float: left;\}  
   .clear\{clear: left;\}  
   .p01\{background: \#36f;\}  
   .p02\{background: \#666;\}  
   .p03\{background: \#c0c;\}  
   .p-display\{display: inline; display: inline-block; margin: 0 -3px;\}/\*块级改成内联\*//\*inline-block块改成内联保持块的属性\*/  
   .span01\{ background: beige;\}  
   .span02\{ background: red;\}  
   .span03\{ background: greenyellow;\}  
   .span-display\{ display: block; width: 100px;\}/\*内联改变成块\*/  
  </style>  
 </head>  
 <body>  
  <div id="box">  
   <div class="box01 box-fd">box01</div>  
   <div class="box02 box-fd">box02</div>  
   <div class="box03 box-fd">box03</div>  
   <div class="clear"></div>  
  </div>  
  <p class="p01 p-display">林兴</p>  
  <p class="p02 p-display">林兴</p>  
  <p class="p02 p-display">林兴</p>  
  <span class="span01 span-display">林兴2</span>  
  <span class="span02 span-display>林兴2</span>  
  <span class="span03 span-display>林兴2</span>  
 </body>  
</html>

发表评论取消回复

表情：

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

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

相关阅读

相关浮动

loat:left 先向左浮动，后向上浮动(right一样的道理) １．如果浮动元素的上一个兄弟元素是正常元素，则浮动元素跑不上去 <!DOCTYPE ht...

喜欢ヅ旅行/ 2024年04月18日 17:16/ 0 赞/ 9 阅读

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

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

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

相关浮动以及清除浮动

文章目录浮动浮动特征浮动会脱离文档浮动可以内联排列浮动会导致父元素高度坍塌

悠悠/ 2022年10月22日 15:47/ 0 赞/ 196 阅读

相关音乐社交类登录注册htmlcss3+html5模板

[下载地址][Link 1] 一款通用的社交平台网站登录注册表单切换页面模板。支持手机验证码，图片验证码，第三方登录等功能。 ![8832d92220fd03c4fcef1

超、凢脫俗/ 2022年09月14日 00:27/ 0 赞/ 173 阅读

相关浮动

一、浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。二、浮动元素引起的问题：（1）父元素的高度无法被撑开，影响与父元素同级的元素

偏执的太偏执、/ 2022年07月15日 08:46/ 0 赞/ 189 阅读

相关浮动与清除浮动

使用方法：只需要在需要清楚浮动的div上添加类名 class="clearfix"即可例子： <div class="someclass clearfix">

小鱼儿/ 2022年05月16日 04:26/ 0 赞/ 229 阅读

相关浮动

一、浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。文档流是文档中可显示对象在排列时所占用的位置。二、浮动的特点

淩亂°似流年/ 2022年01月30日 10:19/ 0 赞/ 255 阅读

相关浮动

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="u

╰半夏微凉°/ 2021年11月17日 17:42/ 0 赞/ 292 阅读

相关浮动+清除浮动

界面布局 1.企业开发中什么时候使用标准流什么时候使用浮动流？垂直方向使用标准流，水平方向使用浮动流。 2.拿到一个很复杂的界面如何入手？从上至下布局、从

待我称王封你为后i/ 2021年10月30日 06:54/ 0 赞/ 470 阅读

相关浮动

浮动视觉格式化模型，大体上将页面中盒子的排列分为三种方式： 1. 常规流 2. 浮动 3. 定位应用场景 1. 文字环绕 2. 横向排列浮动

阳光穿透心脏的1/2处/ 2021年09月30日 14:42/ 0 赞/ 280 阅读