浮动DIV和P元素 - 腾讯云开发者社区

文章/答案/技术大牛

发布

P不能做div的父元素？

P和div同为块元素，为什么P不能做div的父元素？执行结果：可以在控制台看到这样一段信息： div像一条分割线一样，把无辜的 P标签一分为二是什么原因导致的呢？...W3C这样说：“ 如果你这样做，将会严重违反P的语义 ” 解决方法暂时没有于是我找到了块级元素和内联元素的嵌套规则，如下：最基本：内联不能嵌套块级，块级可以嵌套内联元素 div>.../span> 错误（内联嵌套块级）有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素这几个特殊的标签是：h1、h2、h3、h4、h5、h6、p、dt。...块级元素与块级元素并列、内联元素与内联元素并列 div>p>p>div>　　正确 div>div>　　正确 div>div>　　错误（块级和内联并列了，正确的写法如下） div> div>

9780 0

【原创】CSS中元素浮动以及清除元素浮动

元素浮动，使元素并排显示属性folat 属性值folat：left左对齐属性值folat：right右对齐浮动的作用：使元素并排显示，并且每个元素间没有间隔，脱离文档流清除元素浮动...：清除元素浮动的原因：元素浮动后，会遮挡已经浮动的元素后边的元素位置，使浮动元素后边元素显示不全。...清除办法： 1.在浮动元素后，新建一个块级元素。...2.设置该块级元素属性clear 属性值：left 清除左浮动属性值：right 清除右浮动属性值：both 清除左右两边浮动(只要元素有浮动，无论左右两边浮动都可以清除...) 清除浮动后需要对清除浮动的块级元素进行优化 1.设置块级元素高度和字体尺寸为0px 2.设置块级元素visibility属性值为hidden

8211 0

您找到你想要的搜索结果了吗？

是的

没有找到

初识HTML(三)---div块级元素以及浮动和定位(超详细带演示)

div块级元素 div是一个特别重要的标签是块级元素上代码，看图！...那么分块有什么用呢切割成不同的块互不干扰方便定位和布局 div style="width: 100px;height: 100px;background-color: black;">div...可以看出div其实自带了换行效果但是如果我们需要第一行有两个块怎么办呢浮动和定位浮动常见为左右浮动 float: left/right 大家看出来英语很重要了吧用法如下元素的宽高时可以通过 padding：填充 border:边框 margin:边距总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距总元素的高度=高度+顶部填充...如果把每一块内容实现就是一个页面了一个好看的网站往往都会有好看的布局，所以学会div的使用以及浮动和定位是很重要的有兴趣的小伙伴可以试着截你喜欢的网站的图拼装一个去装逼哦，但是要注意不要侵权哦

1.2K3 0

元素的浮动

一、浮动 HTML元素的浮动是通过css来设定的，css中的float属性可以让元素左浮动或者右浮动，具体设置参数如下 float: left; /*左浮动*/ float: right; /*右浮动*...，元素原先占有的位置不在保留，box2顶上去，占有了元素box1原来占有的位置接下来我们把box1和box2都左浮动 .box1{ float: left; } .box2{ float: left...; } 效果如下：我们发现box1和box2从左往右依次排列，box2被box1的边界阻挡接下来把box1、box2和box3都设置左浮动 .box1{ float: left; } ....设置css属性float ul{ float: left; } 页面显示效果如下可以看到效果和第二种方式差不多，但是在网页布局中，给父元素增加浮动，会导致其他方面的问题，也不推荐使用 3.4 增加...both">div> 效果图可以看到效果一致，但是为了清除浮动，在html页面上增加一个元素，就显得多余，而且还会影响文档结构，也不推荐 3.5 通过伪元素清除浮动通过给父元素设置伪元素

5251 0

闭合浮动元素

后来又有了一种新的方式，使用 :after 伪类动态的嵌入一个用于清除浮动的元素，这种方法和上一种原理一样，不同的只是把这个额外的内容用 CSS 生成，但考虑到 IE 不支持 :after 不得不做了不少的...再后来又有人发现将父容器的 overflow 设为除 visible 之外的值就可以在标准兼容浏览器中闭合浮动元素，IE自然又是不支持的，所以这种方法和上一种方法一样都对 IE 做了不同处理（具体就是触发...这种方式在 IE/Win 和标准兼容浏览器中都有较好的效果，但缺点也很明显——父容器未必想浮动就浮动的了，毕竟浮动是一种比较特殊的行为，有时布局不允许其浮动也很正常。...使用 float 虽然在 IE 和标准兼容浏览器中都能闭合浮动元素，但原理却是不同的，IE/Win 中 float 触发了 layout 因而闭合了浮动，而在标准兼容浏览器中，float 其实和上一种方法中的...而对于 IE/Win，它有一套自己的体系，就是 layout，具有 layout 的元素会自动闭合浮动元素，再来看看触发 layout 的 CSS 属性，会发现和上面的块级格式化范围有很多类似之处：浮动元素

9036 0

伪元素清除浮动（重要）利用伪元素:after清除浮动

利用伪元素:after清除浮动让页面呈现多列布局时经常会使用 float:left/right ，可是浮动布局会导致父元素的高度为0（未设置高度的情况下），不会根据子元素的高度而变化，另外，后面不需要浮动想在下一行显示的标签出现在浮动元素的后面...所以我们在使用浮动进行布局的时候会需要一个块级元素（行内元素无效）来设置 clear 属性，如果浮动元素下方本来就有元素，那我们可以直接对该元素设置 clear:both ，若没有其他元素需要展示，我们往往会写一个空白标签来清除浮动...div style="clear:both">div> 但是这样无疑会增加浏览器的渲染负担，所以考虑使用伪元素 :after 来代替这个空白标签，因为清除浮动需要在浮动元素后面，所以不可以使用...:before ，对 :after 设置 content:"" ，并使其 display:block 成为块级元素后 clear:both 来清除浮动： #content:after{content:"

3.4K4 0

浮动元素高度问题

DOCTYPE html> 64-浮动元素高度问题 *{ margin: 0; padding: 0; } div{ border...: 1px solid #000; } p{ float: left; width: 50px;...-- 1.在标准流中内容的高度可以撑起父元素的高度 2.在浮动流中浮动的元素是不可以撑起父元素的高度的 --> div> p>p> div>

1.1K1 0

【CSS】清除浮动 ④ ( 清除浮动 - 使用双伪元素清除浮动 | 代码示例 )

文章目录一、清除浮动 - 使用双伪元素清除浮动二、代码示例一、清除浮动 - 使用双伪元素清除浮动 ---- 为 .clearfix:before 和 .clearfix:after 并集选择器 ,...设置如下样式 : /* 清除浮动 - 使用双伪元素清除浮动 */ .clearfix:before, .clearfix:after { content: ""; display..., 在需要清除浮动元素的父容器中 , 声明 clearfix 类 ; div class="father1 clearfix"> div class="son1">div> div...DOCTYPE html> 清除浮动 - 使用双伪元素清除浮动 div class="son1">div> div class="son2">div> div> div class="father2">div>

6.1K5 1

P不能包div？

P和div同为块元素，为什么P不能做div的父元素？ ? 执行结果： ? 可以在控制台看到这样一段信息： ? div像一条分割线一样，把无辜的 P标签一分为二是什么原因导致的呢？...W3C这样说：“ 如果你这样做，将会严重违反P的语义 ” 解决方法暂时没有于是我找到了块级元素和内联元素的嵌套规则，如下：最基本：内联不能嵌套块级，块级可以嵌套内联元素 div>...p>p> —— 错 p>div>div>p> —— 错特殊的里面可以嵌套div（可以但p>不行）...块级元素与块级元素并列、内联元素与内联元素并列 div>p>p>div>　　正确 div>div>　　正确 div>div>　　错误（块级和内联并列了）以上是它的嵌套规则，但违反了不一定报错，比如我经常用 a 标签去嵌套

1K1 0

浮动元素容器的clearing问题

解决方法一：添加空元素经典的解决方法，就是在浮动元素下方添加一个非浮动元素，就像图三。...（图三在父容器底部添加一个非浮动元素）代码这样写： div> div style="float:left;width:45%;">div> div style="float...;width:45%;">div> div> 这种方法不用修改HTML代码，但是缺点在于父容器变成浮动以后，会影响到后面元素的定位，而且有时候，父容器是定位死的，无法变成浮动。...如果一个元素有Layout，它就有自身的尺寸和位置；如果没有，它的尺寸和位置由最近的拥有布局的祖先元素控制。...>, , , , , , （注意，p>和div>默认不拥有

9192 0

【CSS】浮动 ⑦ ( 浮动元素与兄弟容器盒子关系 | 代码示例 )

一、浮动元素与父容器盒子关系 ---- 浮动元素与父容器盒子关系 : 浮动只会影响当前盒子和后面的盒子 , 前面的标准流元素不受本元素浮动的影响 ; 前一个兄弟元素是浮动元素...: 当前浮动元素与前一个浮动兄弟元素顶部对齐 , 放置在右侧 ; 当前普通流元素只会在前一个普通流元素下方 , 如果前面没有普通流元素, 则在父容器顶部 ; 前一个兄弟元素是..., 那么普通元素后面的浮动元素都会自动显示在第二行 ; 二、代码示例 ---- 1、浮动元素 + 浮动元素两个浮动元素在一行显示 ; 代码示例 : div> div> 展示效果 : 2、普通元素 + 浮动元素本示例中 , 浮动元素在普通元素下方 , 因为浮动属性不影响之前的普通流元素...3、浮动元素 + 普通元素本示例中 , 浮动元素覆盖在普通元素上方 ; 代码示例 : <!

1K2 0

【CSS】浮动 ⑥ ( 浮动元素与父容器盒子关系 | 代码示例 )

文章目录一、浮动元素与父容器盒子关系二、代码示例 1、有内边距的情况 2、没有内边距的情况一、浮动元素与父容器盒子关系 ---- 在父容器盒子模型中 , 将子元素设置为浮动元素 ,...会出现如下情况 : 浮动元素位置 : 浮动元素会自动浮动到父容器盒子模型的左上角与右上角 , 浮动元素与父容器盒子模型边框 : 浮动元素与父容器边框不重叠 , 如果没有内边距 ,...浮动元素紧贴边框内测 ; 浮动元素与父容器盒子模型内边距 : 浮动元素紧贴父容器内边距 ; 二、代码示例 ---- 1、有内边距的情况在下面的代码中 , 父容器边框 20 像素 ,...: 2、没有内边距的情况如果不设置内边距和外边距 , 父容器样式如下设置 : /* 父容器盒子模型 */ .father { width: 400px; height: 400px...: 浮动元素紧贴父容器盒子模型边框内测 ;

1.1K3 0

VUE中隐藏和限制DIV或其他HTML元素

本文链接：https://blog.csdn.net/wo541075754/article/details/101037196 在Vue中隐藏和限制Div或其他html元素操作非常简单。...通常有两种方法可以实现：v-if和v-show这两个判断属性。下面通过一个简单的实例来了解一下这两种方式的实现。完整实例代码如下： Div div id="app"> div v-if="isShow">{{message}}div> div v-show="isTrue">欢迎关注微信公众号：...其中在id为app的div中实现了两种方式的展示v-if=”isShow”和v-show=”isTrue”，他们的用法基本一样。下面的js脚本中对vue进行初始化，默认这两个div都是显示的。...此时，通过点击两个按钮，就可以循环的显示和隐藏div元素。

5.7K1 0

CSS浮动为什么不会遮盖同级元素

type="text/css"> img { border:solid 1px green; display:block; } #id1{ float:left; } div...{ border:solid 2px blue; } p{ border:solid 1px red; } div> p> div> 呈现效果： image.png 我的问题： W3CSchool中讲解CSS定位，浮动那一节中，明确说对框1进行向左浮动时会遮住框2，...原因是浮动后，元素脱离了文档流，不占据空间，想左或向右移动直至左右两边碰到包含框的两边。...比如p>标签中的文本遇到浮动的框就自我调整位置，以防止被覆盖。

1.4K1 0

【说站】css浮动元素的重叠问题

css浮动元素的重叠问题说明 1、行内元素与浮动元素重叠，其边框、背景和内容将显示在浮动元素之上。 2、块级元素与浮动元素重叠时，边框和背景将显示在浮动元素下，内容将显示在浮动元素上。...background-color: lightgreen; border: 1px solid green; width: 700px; height: 500px; } 以上就是css浮动元素的重叠问题

1.7K3 0

DIV元素水平和垂直居中

在前端开发过程中，经常要对元素进行居中设置。一般有水平居中，和垂直居中。一般设置水平居中简单。基本是margin:0 auto，就可以了。...但是垂直居中，我们有时会觉得使用vertical-align,但是这个属性对div元素不起作用。目前通用的解决办法是，使用绝对定位，然后设置left和top为50%。然后通过margin来设置。...代码如下： div元素水平和垂直居中 #...="text" value=""/>div> div>密码:div>...使用Chrome、Firefox和IE9以上浏览器中，改变浏览器的大小，div元素还是会垂直居中。所有不需要额外写JavaScript代码进行定位。

3.7K8 0

【说站】css浮动元素的规则介绍

css浮动元素的规则介绍说明 1、当浮动元素浮动时，其margin不会超过包含块的padding。如果想要超过元素，可以设置margin属性。...如果两个元素一个向左浮动，另一个向右浮动，左浮动元素的marginRight不会与右浮动元素的marginLeft相邻。 2、若有多个浮动元素，浮动元素将按顺序排列而不重叠。...后面的元素高度不会超过前面的元素，也不会超过包含块。 3、如果非浮动元素和浮动元素同时存在，非浮动元素在前面。浮动元素不会高于非浮动元素。浮动元素会尽可能对齐顶部、左右。实例 <!...150px; height: 150px; background: blue; } div...>div> div>div> div>div> 以上就是css浮动元素的规则介绍，希望对大家有所帮助。

8762 0

webkit中BFC元素临近浮动元素时的边距bug

其实以webkit为核心的浏览器，包括但不限于Safari和Chrome，也有一个关于浮动和边距的bug，同样会造成布局错误。...触发这个bug的条件是：在一个非浮动元素上应用overflow，且其值不为visible（这将形成一个Block Formatting Context元素）。...这个BFC元素拥有一个浮动的兄弟元素。在这个BFC元素上应用与其兄弟元素浮动方向相同的margin。...）；当BFC与浮动方向相同的边距大于浮动元素占据的总宽度时，BFC另一侧的边距等于浮动元素占据的总宽度（下图第三种情况）。...最佳做法，当overflow和margin都必不可少的时候，把BFC的margin-left改成浮动元素的margin-right。

2.5K5 0

CSS浮动为什么不会遮盖同级元素

type="text/css"> img { border:solid 1px green; display:block; } #id1{ float:left; } div...{ border:solid 2px blue; } p{ border:solid 1px red; } div> p> div> 呈现效果： ?...我的问题： W3CSchool中讲解CSS定位，浮动那一节中，明确说对框1进行向左浮动时会遮住框2，原因是浮动后，元素脱离了文档流，不占据空间，想左或向右移动直至左右两边碰到包含框的两边。...比如p>标签中的文本遇到浮动的框就自我调整位置，以防止被覆盖。

1.5K2 0

js动态创建div等元素实例

js动态创建div等元素实例 div'); div.id="createDiv"; div.style.cssText = 'border:1px solid red; width:200px; z-index:...100; height:20px;'; document.body.appendChild(div); }, appendDivChild:function(){ var div...= document.createElement('div'); div.id="appendDivChild"; div.style.cssText = 'border:1px solid...green; width:400px; z-index:100; height:100px;'; var childDiv= document.createElement('div');

14.8K2 0

点击加载更多

P不能做div的父元素？

【原创】CSS中元素浮动以及清除元素浮动

初识HTML(三)---div块级元素以及浮动和定位(超详细带演示)

元素的浮动

闭合浮动元素

伪元素清除浮动（重要）利用伪元素:after清除浮动

浮动元素高度问题

【CSS】清除浮动 ④ ( 清除浮动 - 使用双伪元素清除浮动 | 代码示例 )

P不能包div？

浮动元素容器的clearing问题

【CSS】浮动 ⑦ ( 浮动元素与兄弟容器盒子关系 | 代码示例 )

【CSS】浮动 ⑥ ( 浮动元素与父容器盒子关系 | 代码示例 )

VUE中隐藏和限制DIV或其他HTML元素

CSS浮动为什么不会遮盖同级元素

【说站】css浮动元素的重叠问题

DIV元素水平和垂直居中

【说站】css浮动元素的规则介绍

webkit中BFC元素临近浮动元素时的边距bug

CSS浮动为什么不会遮盖同级元素

js动态创建div等元素实例

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐