Using flow-root instead of clearfix

HTML & CSS
1

How would display: flow-root be used here instead of clearfix?

https://jsfiddle.net/t3k8dy6w/


.groupa::after {
  content: "";
  display: table;
  clear: both;
}
.groupb::after {
  content: "";
  display: table;
  clear: both;
}
.groupc::after {
  content: "";
  display: table;
  clear: both;
}

.groupd::after {
  content: "";
  display: table;
  clear: both;
}
2

You only need to use clear to cleared floated content. As far as I can see, there are no floats in your code.

3

Float is used 9 times in the code, and I have clearfix implemented in it.

4

You’d add display:flow-root to .container then remove the div called groupa from the html along with all those unnecessary styles (which should have been assigned to a simple class like clearfix and not repeated multiple times).

None of which would have been needed if you had use the flex version I mentioned a lifetime ago. It’s pointless to eschew modern methods especially when you use a more modern method to contain the old fashioned floats…

3 Likes
5

I was reading about flow-root and never used it before and wanted to see how it is used on a code that uses clearfix.

I have a flex version, and a grid version, I have multiple versions, I just wanted to see how a flow-root is used because I never used it before.

1 Like
7

I’m having an issue adding:

display: flow-root;

https://jsfiddle.net/m3o4u01a/

Works here:

.container {
  width: 936px;
  padding: 25px;
  /*overflow: hidden;*/
  margin: 100px auto;
  border-radius: 25px;
  border: 2px solid #0059dd;
  background: #000000;
  display: flow-root;
}

.container-right .wrapc {
  position: relative;
  cursor: pointer;
  /* overflow: hidden;*/
  margin: 45px 0 0 0;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
   display: flow-root;
}

It’s not working on these:

.container-left .wraph {
  position: relative;
  width: 606px;
  margin: 45px 0 0 0;
  /* overflow: hidden; */
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background-position: 0 -600px;
  background-size: 100% 200%;
  display: flow-root;
}

.container-right .wrape {
  position: relative;
  width: 266px;
  /* overflow: hidden; */
  margin: 45px 0 0 0;
  border-radius: 25px;
  background-position: 0 -168px;
  background-size: 100% 196.557%;
  display: flow-root;
}

Last working version:
https://jsfiddle.net/t3k8dy6w/

.groupa::after {
  content: "";
  display: table;
  clear: both;
}
.groupb::after {
  content: "";
  display: table;
  clear: both;
}
.groupc::after {
  content: "";
  display: table;
  clear: both;
}

.groupd::after {
  content: "";
  display: table;
  clear: both;
}
8

That’s because your js is setting display:block and over-rides any display:flow-root settings in the css.

9

Can block be removed?
or it can’t be removed?

or, display:flow-root just can’t work with those codes?

10

Can you show me the fiddle where display:flow-root is not working?

You only show working examples above of other methods.

11

display: flow-root; is not working on these

https://jsfiddle.net/m3o4u01a/

.container-left .wraph {
  position: relative;
  width: 606px;
  margin: 45px 0 0 0;
  /* overflow: hidden; */
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background-position: 0 -600px;
  background-size: 100% 200%;
  display: flow-root;
}

.container-right .wrape {
  position: relative;
  width: 266px;
  /* overflow: hidden; */
  margin: 45px 0 0 0;
  border-radius: 25px;
  background-position: 0 -168px;
  background-size: 100% 196.557%;
  display: flow-root;
}

clearfix was originally working on these:

https://jsfiddle.net/t3k8dy6w/


/*.groupa::after {
  content: "";
  display: table;
  clear: both;
}
.groupb::after {
  content: "";
  display: table;
  clear: both;
}
.groupc::after {
  content: "";
  display: table;
  clear: both;
}

.groupd::after {
  content: "";
  display: table;
  clear: both;
}*/
12

You are using js to add the class of .hide which is display:none.

.hide {
  display: none;
}

However on the same element you are applying a heavier weighted css with display:flow-root.

.container-left .wraph {
    display: flow-root;
}

Due to the nature of CSS the display will not change because that rules over-rides .hide. This is the basis of CSS.

You would need more weight on your .hide rule.

.outer .hide {
  display: none;
}

This is what happens when you lose sight of the bigger picture and fiddle around with something that you think is unrelated but generally things work together as a whole.

2 Likes
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.