HTML连载46-浮动元素字围现象、浮动练习

【HTML连载46-浮动元素字围现象、浮动练习】的更多相关文章

HTML连载46-浮动元素字围现象、浮动练习

一.浮动元素的字围现象 div{ float:left; width:100px; height:100px; background-color: red; border:1px solid black; } p{ width:500px; height:500px; background-color: yellow; } </style> </head> <body> <div>我是div</div> <p>新浪娱乐讯 30日,…

H5 62-浮动元素字围现象

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>62-浮动元素字围现象</title> <style> div{ float: left; width: 100px; height: 100px; /*background-color: red;*/ border: 1px solid #00…

HTML连载45-浮动元素脱标、排序规则、贴靠现象

一.浮动元素脱标 1.什么是浮动元素脱标脱标:脱离标准流. 当某一个元素浮动之后,那么这个元素看上去就像被从标准流中删除了一样 2.浮动元素脱标之后有什么影响如果前面一个元素浮动了,而后面的一个元素没有浮动,那么这个时候前面的一个元素就会盖住后面的一个元素.前后如果反了没事举例: <style> .box1{ float:left; width:50px; height: 50px; background-color: red; } .box2{ /*float:left;*/ widt…

H5 61-浮动元素贴靠现象

61-浮动元素贴靠现象 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>61-浮动元素贴靠现象</title> <style> .father{ width: 400px; height: 400px; border: 1px solid #000; } .box1{ float: left; w…

CSS 教程 - 闭合浮动元素

按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列. 因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素. 但是有时我们却需要这种自动闭合行为,具体如何处理呢? 有一种做法就是在父容器内再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器.这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签,所以我个人不大喜欢. 后来又有了一种新的方式,使用 :after 伪类动态的嵌入一个…

html 浮动元素

在CSS布局中分为内联元素(display:inline)和块状元素(display:block),块状元素默认会占据一行,可设置高度宽度以及边距,而内联元素不会也不能设置.常见的内联元素有:a.span.input.select,常见的块状元素有:h1-h6,p,div,ul,table. 浮动元素是设置float为非none值的元素,这时该元素会自动被设置成块元素,可以设置宽度.高度以及边距.浮动元素,顾名思义,使该元素浮动在其他元素之上,离开了原来的文档流,直到浮动到父元素的左右边距(上下…