你所说的方框，是指div吧
几乎XHTML中的任何标签都可以用于浮动和定位，而div首当其冲。对于其它标签来说，都有它自身存在的目的，比如ul用于显示列表，而div元素存在的目的就是为了浮动和定位。
div是专门用于布局设计的容器对象
我想你的英语应该不太好，不然很容易理解的东西。
CSS盒模型的概念你看了会更不懂！
我们可以这样理解，把你说的方框换成单词box ，即是盒子的意思。你想象力别那么丰富，没有什么椭圆形啦，心形的盒子，就是方方正正的盒子。在css2中不支持九宫图，也就是说没有椭圆，圆什么的，只有矩形。
你看我们讨论问题的这个页面，右侧有个排行榜，那就是一个方框，一个盒子，一个box啊。而它怎么就在那儿，而不是下面，左面呢，就是因为：浮动。浮动是定位的一种的方式，布局的一种方法，你慢慢的就会接触到，也就是float。
你举例中提到的对象，是指html中的标签。任何一个标签都可以被设置高和宽，现在和你简单的讲，有的需要设置一下。
如果你有足够的耐心看到了这里，我想我知道你的问题出在哪儿了！div没有设置背景色，所以你感受不到它的宽和高！
你试试
<div style="width:500pxheight:300pxbackground:#ff0000"></div>
怎么样，我相信聪明的你知道宽和高是谁的了吧？
关于DW和浏览器的差别，用经验来谈的话是你写的不够标准，用白话来讲的话，别看啦，看浏览器就够了。那个东西就是那样的。
关于clear属性
clear是你以后布局排版中常用到的样式代码，我想纠正你的书或者你的表达：clear属性说是设置不允许有浮动对象的边。
正确的说法是：顾名思义，clear，清除，打扫。清除左右两侧的浮动对象。
浮动对象不是哪些，而是哪些具有浮动属性。只要在代码中添加float，谁都可以成为浮动对象。
说白点，一排站三个孩儿，我给左边那个孩子一块float，中间和右侧都走了！
按照从上到下的顺序，那俩都上左边那孩子下面去了。
你可以自己尝试一下，记得给每个div或者其它标签添加背景颜色，这样你测试时很直观！
回答的最后,实现你的实现:
<img src="图片地址" alt="图片说明" width="200px" height=""100px/>
<p>一段文字</p>
<table width-"250px" height="150px">
<tr>
<td>列1</td>
<td>列2</td>
</tr>
</table>
上面是没有添加css的
其实你很好奇，如何让它们实现一排。其实很简单
CSS部分
.left{float:left}
把上面这个加进去就可以实现了。下面是完整的
<img src="图片地址" alt="图片说明" width="200px" height=""100pxclass="left" />
<p class="left">一段文字</p>
<table width-"250px" height="150px" class="left">
<tr>
<td>列1</td>
<td>列2</td>
</tr>
</table>
说明：分别在img, p, table中加入了class="left" 也就是我们写好的CSS样式
说在最后，上面的方法对你可能早了点，但你看到效果后我相信你更加喜欢CSS的便捷。
为什么我花了半个小时在这里回答这种东西？
忽然回想起4年前初学CSS的青涩……
呵呵，你要加油哦！
CSS画正方形长方形很简单，本文就不说了。
一、三角形
1、CSS画等腰三角形
2、画直角三角形：
二、画圆形
注意：border-radius是width/height的一半（50%）。
画半圆：
半圆的画法是把高度设为宽度的一半，并且也只设置左上角和右上角的半径，且半径为宽度的一半。
画四分之一圆：是把高度和宽度设置为相等，只设置一个圆角，其半径等于高度或宽度。
三、画椭圆
斜杠前面的一组四个值分别表示四个角的水平半径；斜杠后面的一组四个值分别表示四个角的垂直半径。
四、平行四边形
margin-left是为了使得平行四边形可以全部在浏览器中显示出来
五、梯形
高度为0。有宽度没高度。
六、五边形、六边形
原文链接： https://blog.csdn.net/qq_41145685/article/details/104464232—————————————————————
一、什么是盒子模型(Box Model)
盒子想必大家都是知道的吧！
生活中我们的快递有盒子包装着，买的蛋糕也是有盒子包装着，我们的礼品也是被盒子包装着。
模型是什么呢？
它是主观意识借助实体或者虚拟表现构成客观阐述形态结构的一种表达目的的物件
css中的盒子模型它是可以对元素进行布局，设置距离的大小，这里面包括含有外边距、边框、内边距和内容主体这四个部分。
二、CSS中的标准盒子模型(W3c标准的盒子模型)
CSS中的盒子模型也是主观意识借助实体或者虚拟表现构成客观阐述形态结构的一种表达目的的物件，在网页的实体中我们是看不见实际盒子模型的。但是我们能够清楚的看到它起到的作用。
1、盒子模型由” content(内容)+padding(内边距)+border(边框)+margin(外边距)“四个部分组成
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
2、标准盒子模型的计算
如图：
标准的盒子模型的大小是：content(区域内容大小)+padding(内边距)+border(边框)+margin(外边距)；
注：标准盒子的初始设置宽高大小不包含padding、border和margin的大小。
三、怪异盒子模型(IE标准的盒子模型)
1、怪异盒模型也叫IE盒子模型
怪异盒主要表现在IE内核浏览器中，当前大部分浏览器支持的是W3C的标准盒子模型，不过其他浏览器也保留了IE盒子模型的支持，需要在CSS中添加触发怪异盒的条件。
怪异盒子(IE盒子模型)的触发条件：
(1) 给元素添加CSS3属性box-sizing:border-box(注：所以如果用CSS3新属性，就不要考虑低版本浏览器了)
(2)文档结构的doctype不写，这个是在IE8 IE7 IE6 IE5等低版本上有，测试可以在win7系统上比较老旧的IE浏览器上，win10自带的新IE浏览器不可以。
2、怪异盒子(IE盒子模型)模型的计算
如图可见添加了怪异盒的div盒子宽度变小了。
标准的盒子模型的大小是：content(区域内容大小)+margin(外边距)；
注：怪异盒子的初始设置宽高大小包含padding、border大小在内，但不包含margin的大小。
