《布尔教育_燕十八_html教程》从最基本的概念开始讲起，步步深入，带领大家学习html、css样式基础知识，了解各种常用标签的意义以及基本用法，后半部分讲解css样式代码添加，为后面的案例课程打下基础。
课程播放地址：http://www.php.cn/course/222.html
该老师讲课风格:
教师讲课深入浅出，条理清楚，层层剖析，环环相扣，论证严密，结构严谨，用思维的逻辑力量吸引学生的注意力，用理智控制课堂教学进程。学生通过听教师的讲授，不仅学到知识，也受到思维的训练，还受到教师严谨的治学态度的熏陶和感染
立即学习“前端免费学习笔记（深入）”；
本视频中较为难点是oveflow溢出处理了：
问题的提出：
最简单的一种情形就是我们把一个小的、固定宽度的p元素（比如导航、引用等）和其他元素内容一起包含在一个大的p中。比如下面这段代码：
<p id="outer">
<p id="inner"> <h2>A Column</h2> </p>
<h1>Main Content</h1>
<p>Lorem ipsum</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/learn/2200" title="布尔教育燕十八XML视频教程课件"><img
src="https://img.php.cn/upload/webcode/000/000/000/59bf7f4daf612573.png" alt="布尔教育燕十八XML视频教程课件" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/learn/2200" title="布尔教育燕十八XML视频教程课件">布尔教育燕十八XML视频教程课件</a>
<p>布尔教育燕十八XML视频教程课件</p>
</div>
<a href="/xiazai/learn/2200" title="布尔教育燕十八XML视频教程课件" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</p>我们可以为“#inner”设定一个宽度值（比如说20%），但是由于p是块级元素，即使我们设定了宽度，其后面的内容也只能在下一行中显示，除非我们给它设定一个浮动属性（无论是向左浮动或者向右浮动）。那么此时会产生我们上面提到的问题了。
如果“#inner”的宽度和高度都比“#outer”小，这不会有问题。
但是，如果“#inner”的高度超过了“#outer”，那么的底部就会超出“#outer”的底部。这是因为我们为“#inner”设定了float属性后，它就会脱离的文本流，无论其宽度和高度怎么变化都不会使“#outer”跟随变化。
例一：未清除浮动时的布局表现
在这个例子中，最开始由于“#inner”的高度小于“#outer”所以不会有问题，但是当你点击“加长”后你会发现“#inner”的底边已经超出了“#outer”的范围，而“#outer”没有发生改变。这就是我们所提到的“清除浮动（闭合浮动元素）”或者是“闭合浮动”问题
解决办法：
1）额外标签法
第一个，也是W3C推荐的方法就是使用额外标签的办法。这种方法就是在内容的末尾增加一个空的标签，典型的做法就是使用类似
<br style="clear:both;" />
或者使用
<p style="clear:both;"></p>
这种办法通过增加一个HTML元素迫使外部容器撑开。不过这个办法会增加额外的标签使HTML结构看起来不够简洁。
这里还给大家推荐了资料的下载：http://www.php.cn/xiazai/learn/1857
lionhit
minilionhit
xhtml
